当前位置: 首页 > 面试题库 >

以Ajax方式在Rails 3中提交表单(使用jQuery)

越胤
2023-03-14
问题内容

我是Rails和jQuery的初学者。我在一页中有两个单独的表单,我想以ajax方式(使用jQuery)分别提交。这就是我走了多远。任何人都可以添加或修复此代码以使其正常工作。我正在使用Rails
3.1和jQuery 1.6。先感谢您。

application.js

$(".savebutton").click(function() { 
    $('form').submit(function() {
         $(this).serialize();
    });
});

第一种形式:

<%=form_for :users do |f| %>
  <fieldset>
    <legend>Basic details</legend>
    <%= f.label :school %>
    <%= f.text_field :school,:size=>"45",:class=>"round",:id=>"school" %><br/>      
  </fieldset>
  <p><%= button_to "save and continue",{:class=>"savebutton"} %></p>
<%end%>

第二种形式:

<%=form_for :courses do |c| %>
  <fieldset>
    <legend>Your current classes</legend>
    <label>class:</label><%= c.text_field :subject,:size=>"45",:class=>"round" %><br/>
  </fieldset>
  <p><%= button_to "save and continue",{:class=>"savebutton"} %></p>
<%end%>

学校负责人

class SchoolController < ApplicationController
  respond_to :json
  def create
    @school = current_user.posts.build(params[:school].merge(:user => current_user))
    if @school.save
      respond_with @school
    else
      respond_with @school.errors, :status => :unprocessable_entity
    end
  end
end

CourseController与SchoolController的形状相同


问题答案:

你想要:

  1. 停止提交的正常行为。
  2. 通过ajax将其发送到服务器。
  3. 收到回复并相应地进行更改。

下面的代码应该这样做:

$('form').submit(function() {  
    var valuesToSubmit = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr('action'), //sumbits it to the given url of the form
        data: valuesToSubmit,
        dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
    }).success(function(json){
        console.log("success", json);
    });
    return false; // prevents normal behaviour
});


 类似资料:
  • 问题内容: 我正在尝试在wordpress中获取ajax请求的结果,但是在javascript的警报框中却获得了“ 0”的结果,因此该表单如下所示: javascript看起来像这样: 和PHP: 有谁知道上面的代码是否正确,我也尝试过$ _REQUEST [‘name’],它不起作用。 非常感谢 问题答案: 尝试这样的操作,您没有在PHP 函数中添加期望的参数,因此必须将其添加到jQuery a

  • 问题内容: 我正在尝试使用jquery将值提交到数据库。我是ajax的新手,但是我必须使用ajax。 到目前为止,这是我已经完成的PHP代码 我的html代码是 这是我使用jQuery的ajax 我不知道我在做什么错。任何帮助将不胜感激 问题答案: 与其干扰表单的Submit事件,不如点击事件。要对现有设置进行最小的更改,只需将点击处理程序添加到表单提交按钮。处理程序中的第一件事是调用e.prev

  • 问题内容: 我已经通过Ajax提交了表单,我无法在此提交中上传图片 在提交代码中 输出: JavaScript代码 问题答案: 使用该类最简单: 因此,现在您有了一个FormData对象,准备与XMLHttpRequest一起发送。并使用FormData对象附加字段 并强制jQuery不要为您添加Content-Type标头,否则,上传文件边界字符串将丢失。

  • 问题内容: 我正在尝试使用AJAX技术添加评论,但出现错误: 这是我的代码:View: 控制器: AJAX: 最后一条路线: 任何人都知道问题出在哪里,为什么我不能提交表格? 问题答案: 您没有发布任何数据, 您得到的错误是DB中的列不能为空。 尝试将您的ajax调用更改为此: 改变这个 至 并获取消息和帖子ID: 完成ajax块: 最后,在隐藏字段中添加一个ID: 从Laravel控制器发送回数

  • 问题内容: 看起来这应该是jQuery内置的东西,不需要多行代码,但是我找不到“简单”的解决方案。说,我有一个HTML表单: 当有人更改选择字段时,我想使用ajax提交表单以更新数据库。我认为可以通过以下方式来执行以下操作,而无需手动创建值/属性,只需将它们全部发送即可,例如: 我想念什么? 问题答案: 这就是最终的工作。

  • 问题内容: 我试图使用此示例使用AJAX提交HTML表单。 我的HTML代码: 我的剧本: 这是行不通的,我什至没有收到警告消息,提交时我不想重定向到另一个页面,我只想显示警告消息。 有简单的方法吗? PS:我有几个领域,我仅举两个例子。 问题答案: AJAX快速描述 AJAX只是异步JSON或XML(在大多数新情况下为JSON)。因为我们正在执行ASYNC任务,所以我们很可能会为我们的用户提供更