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的计数按钮，并且每个用户可以更改一次。

更新似乎重新加载它与定义为

$(document).ready(function() {

所以我的身体一个，头部一个。

Answer 1

当然，它会刷新页面，您要向其发送的链接是通过href转到的。 相反，请删除href，然后放置onclick事件和处理程序。 将锚标签替换为：

<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>