每次ajax请求rails应用程序发送的JavaScript

我有一个rails应用程序,通过这个ajax请求跨域(我使用rack-cors来完成这个跨域请求,没有jsonp):它用html响应

  //to ensure cache=true gets passed
  $.ajaxPrefilter('script', function(options) {
  options.cache = true;
  });

   //ajax requests html
   $.ajax({
  beforeSend: function (xhr) {
      xhr.setRequestHeader ('Authorization', api_key);
  },
  dataType: 'html',
  type: 'GET',
  url: url+'/gwsearch/ajax_search?d1='+d1_val+'&d2='+d2_val,
  crossDomain: true,
  success:function(result){

    $("#display").html(result);
  },
  error: function(result) {
    $('#display').html('Unauthorized client.');
  }

它以#display中显示的HTML响应.它有这个脚本标记包含在html中

  <script src="http://localhost:3000/assets/application.js" type="text/javascript"></script>

我在新显示的rails应用程序上有输入按钮,它们看起来像这样:

   <%= form_tag plans_collapse_plans_path, :method => 'post', :remote => true do %>
      <%= hidden_field_tag(:plangroup_id, plangroup.id) %>
      <%= image_submit_tag "collapse.png" %>
   <% end %>

单击输入按钮执行POST.问题是输入按钮将按照我请求跨域rails应用程序的次数进行POST.如果我已经请求应用程序5次,当我点击应用程序上的输入按钮时,它将POST 5次.

无论我发送多少次初始ajax请求,我仍然只有一个application.js存在;它不是一次多次物理缓存.

编辑:这是我的缓存看起来像,你可以看到,只有一个application.js:

collapse_tplans POSTs对应于同一个application.js文件,同一行.如果我已经加载了6次初始ajax请求,那么我将从application.js获得6个collapse_tplan POST

我的猜测是,正在发送的html页面中的脚本标记正在初始化jquery的新版本(因为jquery包含在application.js中),并且还可能是每次在application.js中加载的其他内容的重复项.通过脚本标记发送.话虽如此,在Chrome in Network中,无论执行ajax请求多少次,我都只能看到一次请求application.js.

有任何想法吗?我需要我的输入按钮只发一次,就像它应该做的那样.我真的很难过这个.

解决方法:

正如@natedavisolds所说,我猜你的application.js脚本执行了5次,你的按钮的点击操作或表单的提交处理程序附加了5次.

application.js只被请求一次这一事实并不能告诉你它被执行了多少次.

尝试在application.js脚本的开头添加以下行:

console.log('application.js executed');

并检查浏览器控制台以查看消息显示次数.

从您的脚本名称application.js开始,我想这是为了初始化整个页面,而您的ajax请求看起来只是填充#display节点和搜索结果.

您将不得不重构您的application.js文件

>阅读application.js文件中的代码,并将代码分为两部分:涉及设置#display div的部分和其余部分.
>将第一部分移动到单独的results.js(或您认为合适的任何名称)中.
>删除< script src =“application.js”>来自对/ gwsearch / ajax_search请求的响应的节点,并将其替换为< script src =“results.js”>节点而不是

相关文章

IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...