阅读跨域JSON响应

Question

 <script> 
     $.ajaxSetup({contentType: 'application/json'}); 
     function submit_data(f){ 
      alert('submitting') 
      var data_string = $(f).serialize(); 
      $.ajax({ 
       url: "http://localhost:3000/application/1/contact_us.json?jsonpcallback=?"+data_string, 
       dataType: "jsonp", 
       type : 'post', 
       processData: false, 
       crossDomain: true, 
       contentType: "application/json", 
       jsonp: false, 
       jsonpcallback: result() 
      }); 
     } 

     function result(){ 
      alert('back in') 
      alert(data) 
     } 
     function jsonp1300279694167(){ 
      alert('dhoom') 
     } 
     </script> 

我有上面的脚本跨域查询并在窗体中发布数据的脚本。
一切似乎工作正常。 JSON响应可以在萤幕控制台中看到。我想要处理响应并相应地向用户显示状态消息。我应该如何实现它？

---

UPDATE

我曾尝试T.J.的建议Crowder但还没有运气。修改后的代码是如下

function submit_data(f){ 
    alert('submitting') 
    var data_string = $(f).serialize(); 
    $.ajax({ 
      url: "http://localhost:3000/application/1/contact_us.json?"+data_string, 
      dataType: "jsonp", 
      crossDomain: true, 
      success: handleSuccess() 
     }); 
} 



function handleSuccess(data) { 
    alert("Call completed successfully"); 
    alert(data); 
} 

这并不访问data和警报undefined。如果我尝试从success: handleSuccess()传递错误并重定向到一个http请求。

我得到Ruby on Rails应用程序的响应。下面是我打

def create 
    errors = ContactUsForm.validate_fields(params) 
    logger.info errors.inspect 
    if errors.blank? 
     respond_to do |format| 
     format.json {render :json => {:status => 'success'}.to_json} 
     end 
    else 
     respond_to do |format| 
     format.json {render :json => {:status => 'failure', :errors => errors}.to_json} 
     end 
    end 
    end 

的方法是没有办法，我需要在我的Rails应用程序

Answer 1

我试过很多教程，包括上面的答案，但没有运气。所以我实现它像下面

形式

<form action="" onsubmit="submit_data(this, '1'); return false;"> 
    // some form fields 
</form> 

的形式

<script> 
    function submit_data(f, app_id){ 
    var data_string = $(f).serialize(); 
    $.ajax({ 
       url: "http://www.example.com/"+app_id+"/contact_us.js?"+data_string, 
       dataType: "jsonp", 
       crossDomain: true, 
      }); 
    } 

    function show_errors(jsonOb) 
    { 
     $("span.error").remove(); 
     $.each(jsonOb, function(key,val){ 
     $("#contact_us_form_"+key).after("<span class=error>"+val+"</span>") 
    }); 
    } 


</script> 

提交功能，在我的控制器

def create 
    @application = Application.find params[:application_code] 
    @errors = ContactUsForm.validate_fields(params, @application) 
    @application.save_contact_us_form(params[:contact_us_form]) if @errors.blank? 

    respond_to do |format| 
     format.js #{render :json => {:status => 'success'}.to_json} 
    end 
    end 

最后在create.js.erb

<% if @errors.blank? %> 
    window.location = "<%= @application.redirect_url %>" 
<% else %> 
    var errors = replaceAll('<%= escape_javascript(@errors.to_json)%>', "&quot;", "'") 
    var errors_json = eval('(' + errors + ')') 
    show_errors(errors_json); 
    function replaceAll(txt, replace, with_this) { 
    return txt.replace(new RegExp(replace, 'g'),with_this); 
    } 
<% end %> 

这种方式我叫表格submit_form提交并调用show_errors JavaScript函数从它自己的服务器。它的工作原理.. 但是，如果这是一个最糟糕的解决方案，我仍然有意见吗？

Answer 2

你接近配置任何东西。你只需要使用success回调像往常一样（见ajax文档），而不是一个特殊的一个：

$.ajax({ 
    url: "http://localhost:3000/application/1/contact_us.json?jsonpcallback=?"+data_string, 
    dataType: "jsonp", 
    type : 'post', 
    processData: false, 
    crossDomain: true, 
    contentType: "application/json", 
    jsonp: false, 
    success: function(data) { 
     // Use data here 
    } 
}); 

而且，您的代码：

jsonpresponse: result() 

...会呼叫的result功能然后将其返回值用于ajax调用的jsonpresponse属性。如果你想使用一个单独的函数，这很好，但你不包括()，所以：

$.ajax({ 
    url: "http://localhost:3000/application/1/contact_us.json?jsonpcallback=?"+data_string, 
    dataType: "jsonp", 
    type : 'post', 
    processData: false, 
    crossDomain: true, 
    contentType: "application/json", 
    jsonp: false, 
    success: result 
}); 

function result(data) { 
    // use `data` here 
} 

此外，我/很肯定你不需要想jsonp参数，如果你使用success，所以：

$.ajax({ 
    url: "http://localhost:3000/application/1/contact_us.json?jsonpcallback=?"+data_string, 
    dataType: "jsonp", 
    type : 'post', 
    processData: false, 
    crossDomain: true, 
    contentType: "application/json", 
    success: result 
}); 

function result(data) { 
    // use `data` here 
} 

最后：你确定要设置contentType？这涉及到发送给服务器的内容，而不是从它接收的内容。如果你真的把JSON编码的数据发布到服务器上，那很好，你很好;但它看起来像你使用jQuery的serialize函数，它不会产生JSON（它会产生一个URL编码的数据字符串）。因此，您可能还想从电话和ajaxSetup呼叫中删除contentType。

Answer 3

我希望你可以尝试jQuery-JSONP
jQuery-JSONP How To

[例]

$.getJSON('server-url/Handler.ashx/?Callback=DocumentReadStatus', 
    { 
     userID: vuserID, 
     documentID: vdocumentID 
    }, 
    function(result) { 
     if (result.readStatus == '1') { 
      alert("ACCEPTED"); 
     } 
     else if (result.readStatus == '0') { 
      alert("NOT ACCEPTED"); 
     } 
     else { 
      alert(result.readStatus); 
     } 
    });