使用ajax和jquery替换div内容


replace div content using ajax and jquery

我尝试使用代码替换div内容，但它不能正常工作我做错了什么？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
        }
    });
});
}

//列表以获取价值

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="page_num">
              <li id="5"  onclick='MakeRequest();' >5
</li>

              <li id="10"  onclick='MakeRequest();' >10
</li>

               <li id="15"  onclick='MakeRequest();' >15
</li>

           
</ul>

// div替换

1
        This is a div to hold the response.

//我的display.php

1
2
3
<?php
   echo"This is a php response to your request!!!!!!";
?>

编辑：
我如何检查它的运行与否。我的display.php。
我尝试过解决方案，但没有成功。

相关讨论

您的代码具有定义onclick操作的功能，并且不会自行调用。 我打赌，如果你双击链接它会工作，但你应该这样做：

1
2
3
4
5
6
7
8
9
10
11
12
function MakeRequest(id)
{
    $.ajax({
        url : 'display.php',
        data:{"id":id},
        type: 'GET',

        success: function(data){
            $('#ResponseDiv').html(data);
        }
    });
}

最后，将调用更改为：

1
onclick='MakeRequest(5);'

或者只是这样做，它将li元素绑定到click函数，并且不需要"onclick"：

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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);
        }
    });
});
});
相关讨论

删除MakeRequest()函数只需尝试使用$("#page_num li").click否则它将调用函数两次

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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);
         }
      });
   });
});

您已将绑定到该函数的onclick事件绑定到MakeRequest，然后在该函数中再次将li绑定到click事件。

你最好采取这种方法：

1
2
3
4
5
6
7
8
9
10
11
$(function(){
    $("#page_num li").click(function() {
        $.ajax({
        url : 'display.php',
        data:{id: $(this).attr('id')},
        type: 'GET',
        success: function(data){
            $('#ResponseDiv').html(data);
        }
    }
});

并摆脱内联onclick事件。

将onclick事件移动到标记，以便：