使用ajax和jquery替换div内容

我尝试下面的代码来取代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);
        }
    });
});
}

//列表以获取价值

<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来替换

<div id='ResponseDiv'>
        This is a div to hold the response.
</div>

//我的display.php

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

编辑:我如何检查它的去或不去我的display.php。 我有尝试解决方案,但没有取得成功。


您的代码具有定义onclick操作的功能,并且不会自行创建呼叫。 我敢打赌,如果你双击链接,它会工作,但你应该这样做:

function MakeRequest(id)
{
    $.ajax({
        url : 'display.php',
        data:{"id":id},
        type: 'GET',

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

最后,将此调用更改为:

onclick='MakeRequest(5);'

或者只是这样做,它将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);
        }
    });
});
});

删除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);
         }
      });
   });
});

你有绑定到该函数的onclick事件,称为MakeRequest然后在该函数中再次将li绑定到单击事件。

你最好采取这种方法:

$(function(){
    $("#page_num li").click(function() {
        $.ajax({
        url : 'display.php',
        data:{id: $(this).attr('id')},
        type: 'GET',
        success: function(data){
            $('#ResponseDiv').html(data);
        }
    }
});

并摆脱内联onclick事件。

链接地址: http://www.djcxy.com/p/71889.html

上一篇: replace div content using ajax and jquery

下一篇: PHP header(Location: ...): Force URL change in address bar