Question

我有一个包含一些数据的div：

<div id='happyDiv'>
 <a href='#' id='a' class='clickMe'>A</a>
 <a href='#' id='b' class='clickMe'>B</a>
 <a href='#' id='c' class='clickMe'>C</a>
 </div>

当用户点击其中任何一个链接时，我需要调用另一个页面并将$（'＃happyDiv'）替换为页面调用的结果。所以我使用ajax

 $('.clickMe').click(function()
 {
       var userData = $(this).attr('id');
       $.ajax({
                   type: "POST",
                   url: "someDir/somePage.php",
                    data:"id="+userData,
                   success: function(result)
                   {
                            $('#happyDiv').replaceWith(result);
                   }
              });
 });

我希望#happyDiv能够获得ajax调用的结果数据。它确实如此，但它也有来自通话之前的东西。 3 ahref链接。我怎么能“替换”，以便链接在ajax响应中消失，我只留下结果？

链接是静态的，并在第一页加载时存在。

所以我最终得到的是

<div id='happyDiv'>
    ///REsults from AJAX call
    <a href='#' id='a' class='clickMe'>A</a>
    <a href='#' id='b' class='clickMe'>B</a>
    <a href='#' id='c' class='clickMe'>C</a>
</div>

Answer 1

使用html() ...如果您将数据作为对象而不是查询字符串发送，那就更好了。清晰可读。

  $.ajax({
               type: "POST",
               url: "someDir/somePage.php",
                data:{id:userData},
               success: function(result)
               {
                      $('#happyDiv').html(result);
               }
          });

Answer 2

检查你的DOM，它只有一个#happyDiv？
检查结果变量，可能包含这三个链接。

$（..）。replaceWith替换HTML元素，所以它不能完全按照你的说法。

Answer 3

您可以尝试使用纯javascript代码而不是jquery代码来替换div的内容，请检查以下代码：

$.ajax({
    type: "POST",
    url: "someDir/somePage.php",
    data:{id:userData},
    success: function(result)
    {
      document.getElementById("happyDiv").innerHTML=result;
    }
});

还要检查你的ajax请求是否得到了什么？

将div替换为另一页的结果

3 个答案: