【问题标题】:Submitting form with getJSON not succeeding使用 getJSON 提交表单不成功
【发布时间】:2012-04-27 07:42:44
【问题描述】:

我正在研究 Ruby-on-Rails。我正在尝试使用 JSON 请求提交表单。

HTML

<%= form_tag widgets_user_path(:format => "json"), :id => "testjsonform" do %>
        <input type="checkbox" name="cat[]" value="math" id="sub1" class="left">
        <label for="sub1" class="laa">Math</label>
        <input type="checkbox" name="cat[]" value="history" id="sub2" class="left">
        <label for="sub2" class="laa">History</label>
        <input type="checkbox" name="cat[]" value="science" id="sub3" class="left">
        <label for="sub3" class="laa">Science</label>
        <%= hidden_field_tag 'callback', "?" %>
        <div><%= submit_tag 'JSON', :id => "testjson" %></div>
<% end %>

应用程序.js

$("#testjsonform").live("submit", function() {
    $.getJSON($(this).attr("action"),$(this).serialize(), function(data) {
        alert("success");
    })
    .success(function() {
        alert("success");
    })
    .error(function() {
        alert("error");
    });
    return false;
});

在控制台上显示请求已完成 (200)

Started GET "/widgets/user.json?utf8=%E2%9C%93&authenticity_token=N8WsL3BATQiv9OWX4d29o62GOQgX9mXdt%2BBiVe%2FtzU%3D&cat%5B%5D=history&callback=%3F" for 127.0.0.1 at 2012-04-27 12:52:35 +0530
Processing by WidgetsController#user as JSON
Parameters: {"utf8"=>"✓", "authenticity_token"=>"N8WsL3BATQiv9OWX4d29o62GOQgX9mXdt+BiVe/tzU=", "cat"=>["history"], "callback"=>"?"}
User Load (0.3ms)  SELECT "users".* FROM "users" LIMIT 1
===================================== Categories
Completed 200 OK in 3ms (Views: 0.2ms | ActiveRecord: 0.3ms)

在谷歌浏览器中显示正确的 JSONP 响应

?({"user":{"fname":"Test","lname":"User","email":"testuser@testsite.com"}})

一切似乎都是正确的;但它仍然让我在错误块中保持警惕。为什么我没有收到成功警报?什么可能是错的? 任何帮助表示赞赏...

【问题讨论】:

  • 尝试警告错误,它作为参数提供给错误处理程序。
  • jQuery 是做 ajax 还是 jsonp 调用?对于第一个,回调参数既不需要也不允许。
  • 它正在进行 JSON 调用和回调参数 '?'需要正确格式化控制器中的 JSON 响应。你能帮助我如何打印/检查错误类型吗?
  • 有效的 JSON 既不包含问号也不包含大括号。要获取错误对象,请参阅docs
  • 实际上是 JSONP 响应。将进行更正...(参考:stackoverflow.com/a/2887214/707636

标签: ruby-on-rails json forms getjson


【解决方案1】:

好的...我找到了问题所在并提出了(不太漂亮)解决方案...

问题似乎与 URL 编码有关。 (它发送“回调”参数的方式)

$.getJSON(_form.attr("action"), _form.serialize(), function(data) { /* some code */ }发送请求如下

Started GET "/widgets/user.json?utf8=%E2%9C%93&cat%5B%5D=4&callback=%3F&user=3" for 127.0.0.1 at 2012-04-27 16:59:40 +0530
Processing by WidgetsController#user as JSON
Parameters: {"utf8"=>"✓", "cat"=>["4"], "callback"=>"?", "user"=>"3"}
User Load (0.1ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", "3"]]
===================================== Categories
Completed 200 OK in 1ms (Views: 0.1ms | ActiveRecord: 0.1ms)

我在application.js 中进行了一些更改以解码参数。

var _url = _form.attr("action") + "?" + decodeURIComponent(_form.serialize());

$.getJSON(_url, function(data) {
    alert("success");
});

这会按如下方式发送请求并给我成功警报:)(请参阅参数;额外的“_”参数也已添加到其中。)

Started GET "/widgets/user.json?utf8=%E2%9C%93&cat[]=4&callback=jQuery17203027302643749863_1335526106006&user=3&_=1335526108045" for 127.0.0.1 at 2012-04-27 16:58:28 +0530
Processing by WidgetsController#user as JSON
Parameters: {"utf8"=>"✓", "cat"=>["4"], "callback"=>"jQuery17203027302643749863_1335526106006", "user"=>"3", "_"=>"1335526108045"}
User Load (2.6ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", "3"]]
===================================== Categories
Completed 200 OK in 4ms (Views: 0.1ms | ActiveRecord: 2.6ms)

我还将:method =&gt; "get" 添加到form

【讨论】:

    【解决方案2】:

    你为什么不把你的表单设置为remote?您可以使用 javascript 而不是 JSON 进行响应,后者可以在您的页面上显示一些呈现的内容:

    # in your view
    <%= form_tag widgets_user_path, :id => "testjsonform", remote: true do %>
    
    # in *.js.erb
    alert("<%= j params.to_yaml %>")
    $('body').append("<%= j render something %>") # or other stuff for filling your "parent" page
    

    【讨论】:

    • 目的是我正在编写此代码来构建小部件(可以放置在某些用户的站点/博客上)。该脚本将点击一个 URL,并将返回 JSON 数据以填充小部件中的数据。这将有助于我的 Web 应用程序,但对其他人没有帮助。
    猜你喜欢
    • 2023-03-16
    • 2014-11-26
    • 2017-11-17
    • 2020-10-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-03
    • 1970-01-01
    相关资源
    最近更新 更多