使用 jquery 访问 JSON 数据

Question

我正在尝试使用 ajax 验证表单中电子邮件地址的唯一性，但我不知道如何使用 jquery 访问 JSON 数据。

到目前为止，当用户输入电子邮件地址时（当前在 keyup 上），输入将被发送到控制器并返回 JSON 数据，其中包含变量 {"email_exists":true} 或 {"email_exists":false}，具体取决于电子邮件地址是否以前是否保存到数据库。这可以正常工作。

我正在使用 jquery 来验证表单提交时的其他表单功能（电子邮件验证、字段存在），并根据问题动态显示错误。

我的问题是我不知道如何使用 jquery 访问返回的 JSON 数据。我也在努力使用 erb 访问它，<%= p params[:email_exists] %> 什么也没显示。我是 JSON 新手，如有任何帮助，将不胜感激，谢谢。

编辑：这就是我验证电子邮件地址的方式。

new.html.erb

$("#comingsoon_email").on('change keyup paste',function(){
        console.log("change?");
    $.post('/checkemail?email='+$("#comingsoon_email").val(),function(data){

routes.rb

post '/checkemail', to: 'comingsoons#emailcheck'

comingsoons_controller.rb

def emailcheck
  @comingsoon = Comingsoon.search(params[:email])
  respond_to do |format|
    format.json {render :json => {email_exists: @comingsoon.present?}}
  end
end

即将到来的.rb

def self.search(email)
        if email
            where('email = ?',email).first
        end

    end

JSON 返回

{"email_exists":true} 或 {"email_exists":false} 取决于电子邮件地址之前是否已保存到数据库中。

如果电子邮件地址已被占用，我想通过 jquery 显示错误消息。

Answer 1

在您传递给$.post 的函数中，您有data。那是JSON。

data.email_exists 是那个 JSON 数据的值，大致如下：

$.post('/checkemail?email='+$("#comingsoon_email").val(), function(data) {
  console.log(data.email_exists);
});

模糊相关，您可能想要：

1. 清除电子邮件字段值
2. 在函数调用之外创建 URL 以使其更易于阅读
3. 您可以使用 $(this).val() 而不是重新引用元素，尽管这纯粹是为了可读性，而不是功能
4. 让回调是一个外部函数，而不是一个内联的匿名函数——同样是为了可读性和可测试性

所以它最终看起来更像：

function processEmailValidation(data) {
  var emailExists = data.email_exists;
  console.log(emailExists);
  // Do actual stuff
}

keyup/change/paste 处理程序看起来更像：

var url = '/checkemail?email=' + $(this).val();
$.post(url, processEmailValidation);

你也应该优雅地处理 Ajax 失败，我没有在这里反映。

我个人也会提取 keyup/change/paste 处理程序，并将特定于 DOM 的代码从处理程序代码中分离出来，再次是为了可测试性。但这是一个单独的问题。