您所在的位置： 首页 > 最新热文 > 计算机探索

    无法执行使用Rails 3 javascript函数内的Ajax调用函数、Rails、javascript、Ajax

    2023-09-10 15:52:31 作者：持刀稳情场

    我有一个形式，我想用Ajax调用只从一个JavaScript函数调用轨控制器的方法。但没能做到这一点。请检查下面我code。

    payment.html.erb： 

     ＆LT;脚本类型=文/ JavaScript的＆GT;
功能check_dropdown（）{
   $阿贾克斯（{
    网址：/支付/ check_type
    键入：GET
  }）;
}
＆LT; / SCRIPT＆GT;

 ＆LT;％=的form_for：付款：URL =＆GT; {：动作=＆GT; check_type}，远程：真做| F | ％＆GT;
    ＆LT; D​​IV CLASS =totalaligndiv＆GT;
      ＆LT; D​​IV CLASS =输入组bmargindiv1 COL-MD-6拉左＆GT;＆LT;跨度类=输入组插件文本左＆GT;＆LT; D​​IV CLASS =leftsidetextwidth＆GT;类型： ＆LT; / DIV＆GT;＆LT; / SPAN＆GT;
      ＆LT;％= f.select（：s_catagory，options_for_select（['木'，'木']，['普佳Samagree'，'普佳Samagree']，['扫'，'扫']，['照片图示，照片绘图]，['燃烧的助理，燃烧的助理']，选择类型），{}，{：类=＆GT;'的形式控制，：的onchange =＆GT;'check_dropdown （）;'}）％＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =输入组bmargindiv1 COL-MD-6拉左＆GT;＆LT;跨度类=输入组插件文本左＆GT;＆LT; D​​IV CLASS =leftsidetextwidth＆GT;选择供应商：LT; / DIV＆GT;＆LT; / SPAN＆GT;
      ＆LT; D​​IV ID =名称 - 选项＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =clearfix＆GT;＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =tbpaddingdiv1文本中心＆GT;
        ＆LT;按钮类型=提交级=BTN BTN-成功＆GT;提交＆LT; /按钮＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;％结束％GT;

    application.html.erb： 

     ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
  ＆LT;冠军＆GT; SwargadwaraPuri＆LT; /标题＆GT;
  ＆LT;脚本的src =/资产/力矩与 -  locales.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;％= stylesheet_link_tag应用程序，：媒体=＆GT; 所有的％＆GT;
  ＆LT;％= javascript_include_tag应用程序％＆GT;
  ＆其中;％= csrf_meta_tags％GT;
  ＆LT;脚本的src =/资产/ bootstrap.min-2.0.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本的src =/资产/引导-datetimepicker.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;链接相对=图标的href =/资产/ favicon.png类型=图像/ X-图标/＆GT;
  ＆LT;链接相对=样式表的href =/资产/引导-2.0.css＆GT;
＆LT;链接相对=样式表的href =/资产/插件，2.0.css＆GT;
＆LT;链接相对=样式表的href =/资产/主2.0.css＆GT;
＆LT;链接相对=样式表的href =/资源/主题，2.0.css＆GT;
＆LT;链接相对=样式表的href =/资产/引导-datetimepicker.css＆GT;
＆LT; /头＆GT;
＆LT;体类=登录无动画＆GT;
＆LT;％=收率％＆GT;
＆LT;页脚＆GT;
＆LT; D​​IV CLASS =右拉＆GT;
维持＆LT;我类=发发铅笔文字危险＆GT;＆LT; / I＆GT;以＆lt;强＆GT;＆LT; A HREF =htt​​p://www.oditeksolutions.com目标=_空白＆GT; Oditek解决方案＆LT; / A＆GT;＆LT; / STRONG＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =拉左＆GT;
＆LT;跨度ID =一年拷贝＆GT;＆LT; / SPAN＆GT; ＆功放;复印件; ＆LT;强＆GT;＆LT; A HREF =JavaScript的：无效（0）目标=_空白＆GT; Swargadwar，普里市＆LT; / A＆GT;＆LT; / STRONG＆GT;
＆LT; / DIV＆GT;
＆LT; /页脚＆GT;
＆LT; / DIV＆GT;
＆所述; A HREF =＃ID =至顶＆GT;＆所述; I类=发发-字形向上＆GT;＆所述; / I＆GT;＆所述; / a取代;
＆LT;脚本类型=文/ JavaScript的SRC =/资产/引导-filestyle.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/资产/插件，2.0.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/资产/主2.0.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

    routes.rb中： 

     获得金/ check_type=＆GT; 金＃check_type
    毕业即就业,盘点美国2019年最有发展前景的七大职业

    payments_controller.rb： 

     类PaymentsController＆LT;的ApplicationController
    高清付款
        @支付= Vendor.new
        respond_to代码做|格式|
            的format.html
            format.js
        结束
    结束
    高清check_type
        如果PARAMS [：付款] [：s_catagory]
            @支付= Vendor.find_by_s_catagory（PARAMS [：付款] [：s_catagory]）
            @ v_name = Vendor.where（：s_catagory =＆GT; PARAMS [：付款] [：s_catagory]）.pluck（：v_name）
        结束
    结束
结束

    我要当的onchange 赛事将打响 check_type 方法将被调用。

    解决方案   

    我要当onchange事件将打响check_type方法调用。

    应用程序/控制器/ payments_controller.rb：

     类PaymentsController＆LT;的ApplicationController
  高清付款
    @vendor = Vendor.new
  结束

  高清check_type
    把*****执行曾在这里达到了＃这个会出现在你键入的窗口：轨道服务器
    呈现平淡：响应好#Return东西Ajax请求
  结束

  DEF创建#Submit的形式吗？
  结束
结束

    应用程序/视图/支付/ payment.html.erb：

     ＆LT;脚本＆GT;

功能check_dropdown（）{

  $获得（/支付/ check_type功能（data_from_server）{
    警报（服务器的响应是：+ data_from_server）;
  }）;

}

＆LT; / SCRIPT＆GT;

＆LT;％=的form_for（@vendor，网址：{行动：创造}，方法：邮报）办| F | ％＆GT;

  ＆其中;％= f.select（
        ：s_category，
        options_for_select（[
            ['木'，'木']，
            ['法会Samagree'，'普佳Samagree']，
            ['扫'，'扫']，
            ['摄影师'，'摄影师']，
            ['燃烧助理，燃烧的助理']，扫），
        {}，
        {
            ：类=＆GT; 表格控，
            ：的onchange =＆GT; 'check_dropdown（）'
        }
  ）％＆GT;

  ＆其中;％= f.submit％GT;

＆LT;％结束％GT;

    这会产生这个网站：

     ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
  ...
  ...
  ＆LT;元字符集=ISO-8859-1＆GT;
  ＆LT;冠军＆GT;无论＆LT; /标题＆GT;
  ＆LT; META NAME =CSRF-参数CONTENT =authenticity_token/＆GT;
  ＆LT; META NAME =CSRF令牌CONTENT =hvSXeSTq8PL8F6xOjzPlqWF1VGD9nANbKmjBJM / u6swmoee4F5zpfIMfc3iKP415 / IuUJhQ + D0yXVyxfvvu7sg ==/＆GT;
＆LT; /头＆GT;
＆LT;身体GT;

＆LT; D​​IV＆GT;应用布局和LT; / DIV＆GT;

＆LT;脚本＆GT;

功能check_dropdown（）{

  $获得（/支付/ check_type功能（response_from_server）{
    警报（服务器的响应是：+ response_from_server）;
  }）;

}

＆LT; / SCRIPT＆GT;

＆LT;窗​​体类=new_vendor
      的id =new_vendor
      行动=/金/创建
      接收字符集=utf-8
      方法=后＆GT;

  ＆LT;输入名称=UTF8
         TYPE =隐藏
         值=＆放大器;＃x2713; /＆GT;
  ＆LT;输入类型=隐藏
         NAME =authenticity_token
         值=ZHPNwGmYHBfR5ay7ikXSMjcoJSfKd4eQP72I6bTfiI / EJr0BWu4Fma7tc42PSbriqtblYSPVi4eCgmWSxcrZ8Q ==/＆GT;

  ＆LT;选择类=表单控制
          平变化=check_dropdown（）
          NAME =供应商[s_category]
          的id =vendor_s_category＆GT;

    ＆LT;期权价值=木＆GT;木材LT; /选项＆GT;
    ＆LT;期权价值=法会Samagree＆GT;大法会Samagree＆LT; /选项＆GT;
    ＆LT;选项选择=选择值=清扫＆GT;扫地＆LT; /选项＆GT;
    ＆LT;期权价值=摄影师＆GT;摄影师＆LT; /选项＆GT;
    ＆LT;期权价值=燃烧助理＆GT;燃烧助理＆LT; /选项＆GT;

  ＆LT; /选择＆GT;

  ＆LT;输入类型=提交名称=提交值=创建供应商/＆GT;
＆LT; /形式GT;

＆LT; /身体GT;
＆LT; / HTML＆GT;

    如果你不希望的在线的的JavaScript的onchange在html，这曾经被认为是不好的做法，你可以这样做：

    应用程序/视图/支付/ payment.html.erb：

     ＆LT;％=的form_for（@vendor，网址：{行动：创造}，方法：邮报）办| F | ％＆GT;

  ＆其中;％= f.select（
        ：s_category，
        options_for_select（[
            ['木'，'木']，
            ['法会Samagree'，'普佳Samagree']，
            ['扫'，'扫']，
            ['摄影师'，'摄影师']，
            ['燃烧助理，燃烧的助理']，扫），
        {}，
        {：类=＆GT; 表格控}
  ）％＆GT;

  ＆其中;％= f.submit％GT;

＆LT;％结束％GT;

＆LT;脚本＆GT;

功能check_dropdown（）{

  $获得（/支付/ check_type功能（data_from_server）{
    警报（服务器的响应是：+ data_from_server）;
  }）;

}

$（＃vendor_s_category）上（变，check_dropdown）。

＆LT; / SCRIPT＆GT;

    配置/ routes.rb中：

     测试1 :: Application.routes.draw做
  获得金/ check_type
  获得支付/支付
  邮政付款/创建

结束

    DB /迁移/ 20150424194916_create_vendors.rb：

     类CreateVendors＆LT; ActiveRecord的::迁移
  高清变化
    CREATE_TABLE：厂商的确| T |
      t.string：s_category
      t.string：位置

      t.timestamps空：假的
    结束
  结束

    选择而不是默认选择了不同的选择后，＆LT;选择＆GT; ，你会看到类似的服务器窗口如下：

     入门掌握在2015年4月24日22点03分45秒-0600/金/ check_type为:: 1
处理由PaymentsController＃check_type作为* / *
*****执行已到达这里
  渲染文本模板（0.0ms）
完成200确定在3毫秒（浏览次数：2.2ms | ActiveRecord的：0.0ms）

    和网页将推出警报（）显示文本：

      

    服务器的响应是：好

    I have a form and I want to call rails controller method using ajax call from a JavaScript function only. But failed to do this. Please check my code below.

    payment.html.erb:

    <script type="text/javascript">
function check_dropdown(){
   $.ajax({
    url: "/payments/check_type",
    type: 'GET'
  });
}
</script>

 <%= form_for :payment,:url => {:action => "check_type" },remote: true do |f| %>
    <div class="totalaligndiv">
      <div class="input-group bmargindiv1 col-md-6 pull-left"><span class="input-group-addon text-left"><div class="leftsidetextwidth">Type :</div></span>
      <%= f.select(:s_catagory,options_for_select([['Wood','Wood'],['Puja Samagree','Puja Samagree'],['Sweeper','Sweeper'],['Photo Grapher','Photo Grapher'],['Burning Assistant','Burning Assistant']],selected: "Type"),{},{:class => 'form-control',:onchange => 'check_dropdown();'}) %>
      </div>
      <div class="input-group bmargindiv1 col-md-6 pull-left"><span class="input-group-addon text-left"><div class="leftsidetextwidth">Select Vendor :</div></span>
      <div id="name-option">
      </div>
      </div>
      <div class="clearfix"></div>
      <div class="tbpaddingdiv1 text-center">
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
    </div>
    <% end %>

    application.html.erb:

    <!DOCTYPE html>
<html>
<head>
  <title>SwargadwaraPuri</title>
  <script src="/assets/moment-with-locales.js"></script>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <script src="/assets/bootstrap.min-2.0.js"></script>
   <script src="/assets/bootstrap-datetimepicker.js"></script>
   <link rel="icon" href="/assets/favicon.png" type="image/x-icon" />
  <link rel="stylesheet" href="/assets/bootstrap-2.0.css">
<link rel="stylesheet" href="/assets/plugins-2.0.css">
<link rel="stylesheet" href="/assets/main-2.0.css">
<link rel="stylesheet" href="/assets/themes-2.0.css">
<link rel="stylesheet" href="/assets/bootstrap-datetimepicker.css">
</head>
<body class="login no-animation" >
<%= yield %>
<footer>
<div class="pull-right">
Maintained <i class="fa fa-pencil text-danger"></i> by <strong><a href="http://www.oditeksolutions.com" target="_blank">Oditek Solutions</a></strong>
</div>
<div class="pull-left">
<span id="year-copy"></span> &copy; <strong><a href="javascript:void(0)" target="_blank">Swargadwar, Puri Municipality</a></strong>
</div>
</footer>
</div>
<a href="#" id="to-top"><i class="fa fa-chevron-up"></i></a>
<script type="text/javascript" src="/assets/bootstrap-filestyle.min.js"></script>
<script src="/assets/plugins-2.0.js"></script>
<script src="/assets/main-2.0.js"></script>
</body>
</html>

    routes.rb:

     get "payments/check_type" => "payments#check_type"

    payments_controller.rb:

    class PaymentsController < ApplicationController
    def payment
        @payment=Vendor.new
        respond_to do |format|
            format.html
            format.js
        end
    end
    def check_type
        if params[:payment][:s_catagory]
            @payment=Vendor.find_by_s_catagory(params[:payment][:s_catagory])
            @v_name=Vendor.where(:s_catagory =>params[:payment][:s_catagory] ).pluck(:v_name)
        end
    end
end

    I want when onchange event will fired the check_type method will be called.

    解决方案

    I want when onchange event will fired the check_type method will call.

    app/controllers/payments_controller.rb:

    class PaymentsController < ApplicationController
  def payment
    @vendor = Vendor.new  
  end

  def check_type
    puts "*****Execution has reached here"  #This will appear in the window where you typed: rails server
    render plain: "Good" #Return something in response to the ajax request
  end

  def create  #Submit the form to here?
  end
end

    app/views/payments/payment.html.erb:

    <script>

function check_dropdown(){

  $.get("/payments/check_type", function(data_from_server) {
    alert("The server responded with: " + data_from_server);    
  });

}

</script>

<%= form_for(@vendor, url: {action: "create" }, method: "post") do |f| %>

  <%= f.select(
        :s_category,
        options_for_select([
            ['Wood','Wood'],
            ['Puja Samagree','Puja Samagree'],
            ['Sweeper','Sweeper'],
            ['Photographer','Photographer'],
            ['Burning Assistant','Burning Assistant'] ], "Sweeper"),
        {},
        {  
            :class => 'form-control',
            :onchange => 'check_dropdown()'
        }
  )%>

  <%= f.submit %>

<% end %>

    Which produces this html:

    <!DOCTYPE html>
<html>
<head>
  ...
  ...
  <meta charset="ISO-8859-1">
  <title>Whatever</title>
  <meta name="csrf-param" content="authenticity_token" />
  <meta name="csrf-token" content="hvSXeSTq8PL8F6xOjzPlqWF1VGD9nANbKmjBJM/u6swmoee4F5zpfIMfc3iKP415/IuUJhQ+D0yXVyxfvvu7sg==" />
</head>
<body>

<div>Application Layout</div>

<script>

function check_dropdown(){

  $.get("/payments/check_type", function(response_from_server) {
    alert("The server responded with: " + response_from_server);    
  });

}

</script>

<form class="new_vendor" 
      id="new_vendor" 
      action="/payments/create" 
      accept-charset="UTF-8" 
      method="post">

  <input name="utf8" 
         type="hidden" 
         value="&#x2713;" />
  <input type="hidden" 
         name="authenticity_token" 
         value="ZHPNwGmYHBfR5ay7ikXSMjcoJSfKd4eQP72I6bTfiI/EJr0BWu4Fma7tc42PSbriqtblYSPVi4eCgmWSxcrZ8Q==" />

  <select class="form-control" 
          onchange="check_dropdown()" 
          name="vendor[s_category]" 
          id="vendor_s_category">

    <option value="Wood">Wood</option>
    <option value="Puja Samagree">Puja Samagree</option>
    <option selected="selected" value="Sweeper">Sweeper</option>
    <option value="Photographer">Photographer</option>
    <option value="Burning Assistant">Burning Assistant</option>

  </select>

  <input type="submit" name="commit" value="Create Vendor" />
</form>

</body>
</html>

    And if you don't want to inline the javascript onchange in the html, which used to be considered bad practice, you can do this:

    app/views/payments/payment.html.erb:

    <%= form_for(@vendor, url: {action: "create" }, method: "post") do |f| %>

  <%= f.select(
        :s_category,
        options_for_select([
            ['Wood','Wood'],
            ['Puja Samagree','Puja Samagree'],
            ['Sweeper','Sweeper'],
            ['Photographer','Photographer'],
            ['Burning Assistant','Burning Assistant'] ], "Sweeper"),
        {},
        {:class => 'form-control'}
  )%>

  <%= f.submit %>

<% end %>

<script>

function check_dropdown(){

  $.get("/payments/check_type", function(data_from_server) {
    alert("The server responded with: " + data_from_server);    
  });

}

$("#vendor_s_category").on("change", check_dropdown);

</script>

    config/routes.rb:

    Test1::Application.routes.draw do
  get 'payments/check_type'
  get 'payments/payment'
  post 'payments/create'

end

    db/migrate/20150424194916_create_vendors.rb:

    class CreateVendors < ActiveRecord::Migration
  def change
    create_table :vendors do |t|
      t.string :s_category
      t.string :location

      t.timestamps null: false
    end
  end

    After selecting a different choice than the default choice in the <select>, you will see something like the following in the server window:

    Started GET "/payments/check_type" for ::1 at 2015-04-24 22:03:45 -0600
Processing by PaymentsController#check_type as */*
*****Execution has reached here
  Rendered text template (0.0ms)
Completed 200 OK in 3ms (Views: 2.2ms | ActiveRecord: 0.0ms)

    And the webpage will launch an alert() displaying the text:

    The server responded with: Good

    上一篇：监控使用AJAX XMLHtt prequest on Rails应用程序的服务器端程序服务器端、应用程序、程序、XMLHtt

    下一篇：jQuery的错误：太多的递归递归、太多、错误、jQuery

    相关推荐
     
    猜您喜欢
    世界首座会动的大楼：迪拜的转动大楼 达·芬奇塔

    世界首座会动的大楼：迪拜的转动大楼 达·

    精彩图集
    精彩推荐
    图片推荐

    探秘家（tanmijia.com），深层探秘世界自然奇观未解之谜，揭秘宇宙空间、人类、生物未解之谜,世界传闻、奇闻异事ufo未解之谜。有效真实科学探索天下奇观猎奇世界。

    © 2016-2021 探秘家. All Rights Reserved 浙ICP备20029812号-3