jQuery 使用ajax和jquery替换div内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13832911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
replace div content using ajax and jquery
提问by Kango
I try following code to replace div content but its not working what i am doing wrong?
我尝试按照代码替换 div 内容，但它不起作用我做错了什么？
function MakeRequest()
{
$("#page_num li").click(function() {
var id=(this.id);
alert(id);
$.ajax({
url : 'display.php',
data:{"id":id},
type: 'GET',
success: function(data){
$('#ResponseDiv').html(data);
}
});
});
}
//list to get value
//获取值的列表
<ul id="page_num">
<li id="5" onclick='MakeRequest();' ><a href="#">5</a></li>
<li id="10" onclick='MakeRequest();' ><a href="#">10</a></li>
<li id="15" onclick='MakeRequest();' ><a href="#">15</a></li>
</ul>
//div to replace
//要替换的div
<div id='ResponseDiv'>
This is a div to hold the response.
</div>
//my display.php
//我的display.php
<?php
echo "This is a php response to your request!!!!!!";
?>
EDIT: how can i check its going or not to my display.php. i have try solution but not get success.
编辑：我如何检查它是否在我的 display.php 中。我尝试了解决方案，但没有成功。
回答by Tim Withers
Your code has a function which defines an onclick action and doesn't make the call itself. I bet if you double clicked the link it would work, but you should do it like this:
您的代码有一个函数，它定义了一个 onclick 操作并且本身不进行调用。我敢打赌，如果你双击链接它会起作用，但你应该这样做：
function MakeRequest(id)
{
$.ajax({
url : 'display.php',
data:{"id":id},
type: 'GET',
success: function(data){
$('#ResponseDiv').html(data);
}
});
}
Finally, change the call to this:
最后，将调用更改为：
onclick='MakeRequest(5);'
OR just do this, which binds the li element to the click function and no "onclick" is necessary:
或者只是这样做，它将 li 元素绑定到 click 函数并且不需要“onclick”：
$(document).ready(function()
{
$("#page_num li").click(function() {
var id=$(this).attr(id);
$.ajax({
url : 'display.php',
data:{"id":id},
success: function(data){
$('#ResponseDiv').html(data);
}
});
});
});
回答by Pragnesh Chauhan
remove MakeRequest()function just try using $("#page_num li").clickotherwise it will call function twice
删除MakeRequest()函数只是尝试使用$("#page_num li").click否则它会调用函数两次
$(document).ready(function(){
$("#page_num li").click(function() {
var id=(this.id);
$.ajax({
url : 'display.php',
data:{"id":id},
type: 'GET',
success: function(data){
$('#ResponseDiv').html(data);
}
});
});
});
回答by Arash Milani
You have onclick events binded to that function called MakeRequestthen in that function you again bind the lis to a click event.
您将 onclick 事件绑定到该函数，MakeRequest然后在该函数中再次将lis绑定到 click 事件。
You better take this approach:
你最好采取这种方法：
$(function(){
$("#page_num li").click(function() {
$.ajax({
url : 'display.php',
data:{id: $(this).attr('id')},
type: 'GET',
success: function(data){
$('#ResponseDiv').html(data);
}
}
});
and get rid of inline onclickevents.
并摆脱内联onclick事件。
回答by Gian Acuna
move the onclick event to the tag so that:
将 onclick 事件移动到标签，以便：
<a href="#" onclick='MakeRequest();>
<a href="#" onclick='MakeRequest();>
