如何从javascript函数中的html获取数据值？

Question

Hi I'm a beginner of jquery and ajax. This is my code:

.html

<li class="list-group-item">        
    <h2>Vocabulary</h2>
    <h4>
      <span class="label label-success">Like Name</span>  
      <span class="label label-danger">GEPT</span>
      <button type="button" id="collapsible" class="btn btn-default" data-toggle="collapse" data-target="#intro" data-word="good" onclick="loadXMLDoc()">
        <span class="glyphicon glyphicon-plus"></span>
      </button>
    </h4>
    <div class="collapse" id="intro">
      <div class="detail">
        <img src='http://www.michigan.com/assets/images/loading-module.gif'/>
      </div>         
    </div>
  </li>
  <li class="list-group-item">    

javascript:

function loadXMLDoc()
{
  var xmlhttp;
  var word = $(this).data("word");
  var path='get_word_detail.php?word='+word;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("intro").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET",path,true);
xmlhttp.send();

}

My page contain a list with many collapsed list items. Every list item containing a button to expand the content of the item.

i want to get the "data-word" from html but it didnt work, Do anyone know how to do it correctly and whether it's possible for me to just pass the parameter from html tag like "onclick="loadXMLDoc("good")"?

Thanks

Answer 1

use attr function of jquery

$("#collapsible").attr("data-word");

EDIT

$(".btn").click(function(){
alert($(this).attr("data-word"));
});

Answer 2

you can use the below code

function loadXMLDoc(evt)
{
var element = evt.target;
  var xmlhttp;
  var word = $(element).data("word");
...
}

Answer 3

You are making some mix of jQuery and pure js, try to make it one way. But if you want to launch your load func on click without adding onclick attr to html tag use jQuery:

$(document).ready(function(){
  $('#yourBtnId').click(function(){
     loadXMLDoc();
 })
});

If I correcltly understood the question.