2013-03-25 62 views
0

首先让我描述我的情况:使用jquery framwork for ajax

我正要创建一个表单,其中每个字段都有一个帮助按钮。现在,如果有人点击帮助,它会从数据库中获取数据并将其显示在div中。例如

<div class="main"> 
<div class="form"> 
    <!-- my form code will be here--> 
</div> 

<div class="help"> 
    <!-- this div will show some data using ajax. I need to make database query using ID of help then show the data here--> 
</div> 

</div><!--end of main--> 

现在我读了关于w3学校的ajax,我在那里找到了解决方案。这是:

<script> 
function loadXMLDoc(a) 
{ 
var xmlhttp; 
var temp = "myname.php?id=" + a; 


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("myDiv").innerHTML=xmlhttp.responseText; 
     } 
     } 
xmlhttp.open("GET",temp,true); 
xmlhttp.send(); 
} 
</script> 



<h2>AJAX</h2> 
    <button type="button" onclick="loadXMLDoc('1')">Request 1</button> 
    <button type="button" onclick="loadXMLDoc('2')">Request 2</button> 
    <button type="button" onclick="loadXMLDoc('3')">Request 3</button> 
<div id="myDiv"></div> 

如果我点击一个按钮,并发送id作为参数的作品。做了一些谷歌搜索后,我发现最好是使用jQuery框架的Ajax。现在我没有在Google上获得关于此的任何初学者教程。现在

如果上面的代码是确定在这种情况下,用给我一些链接或帮助是如何使JavaScript的数据库查询和获取值并将其设置为使用Ajax一个div。

如果不使用Ajax的话,请给我一些指导,我怎么可以使用Ajax用于获取从数据库中的值,并显示在一个特定的div的好方法。请记住,我需要发送帮助ID与我将进行数据库查询的功能。

我使用WordPress的框架。

回答

3

包括jquery.js in your page那么它很简单,只要

function loadXMLDoc(a) { 
    $('#myDiv').load("myname.php?id=" + a); 
} 

如果你想有一个完整的jQuery的解决方案,那么我会建议使用jQuery的事件注册也喜欢

HTML

<button type="button" class="requester" data-request="1">Request 1</button> 
<button type="button" class="requester" data-request="2">Request 2</button> 
<button type="button" class="requester" data-request="3"Request 3</button> 
<div id="myDiv"></div> 

JS

$(function() { 
    $('.requester').click(function() { 
     $('#myDiv').load("myname.php?id=" 
       + $(this).data('request')); 
    }); 
}); 
0
$.post('myname.php',{id:a},function(data){ $('#myDiv').html(data); });