Question

我是Ajax的新手，我认为非常容易的东西不起作用。为了简化我的问题，我试图用一个说“再见”的替换列表项“Hello”：

我有html：

<ul>
<li>Hello <div class="change">X</div></li>
</ul>

一个单独的php文件（'Substitute.php'）

<?php 
echo "<li>";
echo "Goodbye";
echo "</li>";
?>

在我的html文件中，我正在尝试在网上找到一个简单的Ajax调用：

<script type="text/javascript">

$(document).ready(function() {
$(".change").click(function() {                
$.ajax({url:"Substitute.php", success:function(result){
$(this).parent().html(result); 

}});
});
})    

</script>

虽然不起作用。如果我摆脱了Ajax并且只做$（this）.parent（）。load（“Substitute.php”）;它工作正常。但是，我的php文件实际上要复杂得多，并且链接到MySQL数据库，所以我绝对需要通过Ajax来实现。

有谁能告诉我我在Ajax语法上做错了什么？非常感谢。

Answer 1

因为在你的ajax成功函数中，this对象没有引用被点击的对象。因此，您需要将单击的对象保存到临时变量中。

$(document).ready(function() {
    $(".change").click(function() {
        var obj = this;
        $.ajax({
            url: "Substitute.php",
            success: function(result) {
                $(obj).parent().html(result);

            }
        });
    });
})

Answer 2

尝试从另一个对象中获取此内容并使用replaceWith而不是html，因为您从li获取了Substitute page，否则您的html将无法使用li你的情况下，你会在另一个li尝试$(document).ready(function () { $(".change").click(function () { var $that=$(this); $.ajax({ url: "Substitute.php", success: function (result) { $that.parent().replaceWith(result); } }); }); });，

replaceWith

如果您不想按PHP Page更改代码，请仅从{{1}}

返回文字

Answer 3

试试这段代码：

$(document).ready(function() {
   $(".change").click(function() {
      var element = $(this);                
      $.ajax({url:"Substitute.php", success:function(result){
         element.parent().html(result); 
      }});
   });
})

说明：您在ajax调用的回调函数中访问$（this），期望它是您要更新的DOM元素。在建议的代码中，我们将所需的DOM元素存储在＆＃34; element＆＃34;变量使用闭包并直接从回调函数访问它......

Answer 4

您确定已包含jquery文件以支持ajax。？在执行ajax调用之前尝试并在Click事件上发出警告。喜欢这个

$(".change").click(function() {
 alert('jQuery Working.!!');
});

请检查您是否收到提醒。让我们一个一个地调试它。

我的Ajax语法似乎是错误的

4 个答案: