Question

有人可以告诉我以下代码有什么问题吗？它总是更新到新页面，而不是“内容”div。感谢。

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

而是写<a href="/form" onclick="return updateContent()">Click me</a>，写下以下内容 <span style="cursor:pointer;" onclick="return updateContent()">Click me</span>
以上将有效。

Ajax：div不会更新

3 个答案: