Мой синтаксис Ajax кажется неправильным

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

Попробуйте этот код:

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

Пояснение: Вы обращались к $ (это) внутри функции обратного вызова вызова Ajax, ожидая, что это будет элемент DOM, который вы хотите обновить. В предлагаемом коде мы сохраняем элемент DOM, который мы хотим в переменной «element», используя закрытие и доступ к нему непосредственно из функции обратного вызова ...

Answer 2

Потому что в вашей функции успеха ajax объект this не ссылается на объект с щелчком. Таким образом, вам нужно сохранить объект с щелчком во временную переменную.

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

      } 
     }); 
    }); 
}) 

Answer 3

Try, чтобы получить это в другом объекте и использовать 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

Answer 4

Вы уверены, что вы включили файл jquery для поддержки ajax. ? попытайтесь предупредить что-то на событии Click, прежде чем вы выполните вызов ajax. Нравится

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

любезно проверьте, если вы получаете предупреждение. Позволяет отлаживать его один за другим.