不使用JS刷新或重新加载页面

No refresh or page reload using JS

本文关键字：加载 新加载 JS 刷新      更新时间：2023-09-26

我的Rails 4应用程序中有一个Ajax请求，但一旦单击该按钮，它就会重新加载整个页面。我该如何防止这种情况发生？页面是缓存的，所以我不能简单地添加链接或按钮。提前谢谢。

listing_collection.js

$(document).ready(function(){
$(".listcollect").on("click", function(){
      var listID = this.id;
        $.ajax({
          method: "GET",
          url: "/listing_collections/:id/listcollect",
          success: function(result) {
            var arrLen = result.length
            var $ul = $("<ul></ul>")
            for (var i = 0; i<arrLen; i++){
                var $li = $("<li></li>");
                var $a = $("<a></a>");
                $a.attr("href", "/listings/" + listID + "/add_to_collection?listing="+listID+"$amp;listing_collection_id="+result[i]["id"]+"&amp;listing_id="+listID)
                $a.text(result[i]["name"])
                $li.append($a)
                $(this).next().append($li)
            }
          }.bind(this)
        })
    });
});

这是按钮：

<div class="btn-group listcollect-wrapper">
    <button class="listcollect button btn-blue-white btn-2x dropdown-toggle" data-toggle='dropdown' type="button" id=<%= listing.id %>>Add to Listing Collection <span class="caret"></span></button>
    <ul class='dropdown-menu'>
    </ul>
  </div>

我的两美分此类.listcollect的dom是提交类型的按钮，即button type="submit"

您可以使用button type = "button"或

event.preventDefault()
$(".listcollect").on("click", function(){
      event.preventDefault()
    // Rest of code
})

这是因为这是锚点标记的默认行为。根据建议，您可以将控制类型更改为类似按钮的类型，也可以覆盖默认行为，如

$(".listcollect").on("click", function(e){
    e.preventDefault();
});

试试这个：

$(document).ready(function(){
$(".listcollect").on("click", function(e){
      e.preventDefault();
      e.stopPropagation();
      var listID = this.id;
        $.ajax({
          method: "GET",
          url: "/listing_collections/:id/listcollect",
          success: function(result) {
            var arrLen = result.length
            var $ul = $("<ul></ul>")
            for (var i = 0; i<arrLen; i++){
                var $li = $("<li></li>");
                var $a = $("<a></a>");
                $a.attr("href", "/listings/" + listID + "/add_to_collection?listing="+listID+"$amp;listing_collection_id="+result[i]["id"]+"&amp;listing_id="+listID)
                $a.text(result[i]["name"])
                $li.append($a)
                $(this).next().append($li)
            }
          }.bind(this)
        })
    });
});

我添加了e.preventDefault（）和e.stopPropagation（），前者在默认情况下阻止浏览器处理点击，后者在控件的容器中禁用点击事件的传播，以防它们也有侦听器。

相关文章：