Question

我正在处理现有项目并大量使用jQuery AJAX次来电。现有页面有三个不同的部分标题，左侧菜单和主要内容。使用Spring MVC实现，只要从Spring控制器返回视图，它就会更新整个页面。

现在，因为我正在使用其中一个菜单项但是有标签内容，我使用jQuery来使用jQuery操纵标签中的数据。在我必须使用超链接的时候这样做我不能使用<a>标签，因为从链接返回将替换整个页面。所以我总是限制使用onClick()甚至链接并进行AJAX调用，然后使用jQuery将响应放回窗口。

<a href="" onClick="return loadDetail()">Details</a>
<script>
  $.ajax({
    type: ...,
    url: ...,
    success: function(response) {
      $('#tab1-content').empty().html(response);
    }
  });
</script>

所以我的问题是 - 有没有其他方法可以使用href标签的<a>属性并使用响应视图更新窗口？

Answer 1

我不确定我是否理解正确。你能尝试这样的事吗：

<a href="http://www.stackoverflow.com">Details</a>
<script>
    $('a').click(function(e) {
        e.preventDefault();

        var href = $(this).attr('href');
        loadDetail(href);
    });

    function loadDetail(url) {
        alert("Load from: " + url);

        // Ajax call
    }
</script>

Fiddle

Answer 2

您可以阻止标记的默认行为，只是从您的函数返回false。看到这个小提琴http://jsfiddle.net/s8mpwokt/

或者就像Michael在javascript中回答附加事件一样，这样您就可以使用preventDefault()和stopPropagation()在回调函数中获取事件实例。

在进行AJAX调用时，使用JavaScript onCLick（）进行限制

2 个答案: