javascript - AJAX 帖子和页面刷新

Question

我有 AJAX 发布请求:

$(document).ready(function() {
  $("span").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    var URL = "someURL";
    $.post(URL, this.id, function(data, status) {
      var val = parseInt(document.getElementById(this.data).innerHTML)
      document.getElementById(id).innerHTML = val + 1 ;
      document.getElementById(id).disabled=true;
    });
  });
});

<a href="/book/test/1">Read</a>
<span id="${book.id}">

该脚本正在按预期工作；一个按钮，其中的数字加一。 问题是:

• 页面刷新。单击按钮后，它会重新加载页面上的所有内容。
• 更改后我无法禁用该按钮

简而言之，我需要一个计数按钮，该按钮加 1，并且每个用户可以更改一次。

更新似乎重新加载它与定义为的另一个函数有关

$(文档).ready(function() {

所以我的 body 有一个，头部有一个。

Answer 1

当然，它会刷新页面，您将通过 href 向其发送一个链接。相反，删除 href，并放置 onclick 事件和处理程序。将您的 anchor 标记替换为:

<a onclick="runFunction()">Read</a>

并用此替换您的脚本。

<script>
function runFunction(){
$(document).ready(function(){
   $("span").click(function(e){
       e.preventDefault();
       e.stopPropagation();
       var URL="someURL";
       $.post(URL,
        this.id,
       function(data,status){
           var val = parseInt(document.getElementById(this.data).innerHTML)
           document.getElementById(id).innerHTML = val + 1 ;
           document.getElementById(id).disabled=true;
       });
   });
 });
}
</script>