jquery - Ajax: div wouldn't get updated

Question

Can somebody tell me what's wrong with the following code? It always updates to a new page, instead of the "content" div. Thanks.

This is a test:<br />
   <a href="/form" onclick="return updateContent()">Click me</a>
     <div id="content">
       Update here.
   </div>

<script>
function updateContent() {
  $.ajax({
    type: 'GET',
    url: $(this).attr('href'),
    success: function(data) {
      $('#content').html(data);
    };
 });
};
</script>

Answer 1

由于您使用的是 jQuery，因此您不妨正确使用它。您的链接正在执行链接应该执行的操作，因为您没有任何东西可以取消链接的默认行为。

改变：

<a href="/form" onclick="return updateContent()">Click me</a>

至

<a href="/form">Click me</a>

并将您的 jQuery 更改为：

$('a').click(function(e) {
    e.preventDefault();
    $.ajax({
        type: 'GET',
        url: $(this).attr('href'),
        success: function(data) {
            $('#content').html(data);
        };
    });
});​

Answer 2

梁棠。您的 javascript 代码中有语法错误：

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

之后就不需要;了}。无论如何，这是正确的答案。也不要在 HTML 标记中使用像 onclick 这样的内部事件。让 javascript/jquery 为您处理它们。

This is a test:<br />
<a href="form.html" id="link">Click me</a>
<div id="content">
Update here.
</div>

<script>
$(function () {
    $('#link').bind('click', function (e) {
        e.preventDefault();

        $.ajax({
            type: 'GET',
            url: $(this).attr('href'),
            success: function(data) {
              $('#content').html(data);
            }
         });
    });
});
</script>

解释
1. 我给你的链接一个特定的 ID。所以我可以在 jquery 代码中访问它。
2.在click链接的情况下，我取消链接行为（带e.preventDefault()）

Answer 3

Instead writing <a href="/form" onclick="return updateContent()">Click me</a>, write the following.
<span style="cursor:pointer;" onclick="return updateContent()">Click me</span>
The above will work.