Leggi risposta JSON cross domain

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> 

Ho uno script sopra l'interrogazione attraverso il dominio e la pubblicazione di dati all'interno di un modulo.
Tutto sembra funzionare correttamente. La risposta JSON può essere vista nella console firebug. Voglio elaborare la risposta e visualizzare i messaggi di stato di conseguenza all'utente. Come dovrei realizzarlo?

---

UPDATE

ho provato come suggerito da T.J. Crowder ma non ho ancora fortuna. Il codice modificato è come sotto

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); 
} 

Ciò non accessi data e avvisi undefined. Se provo a passarlo da success: handleSuccess(), esso presenta errori e reindirizza con una richiesta http.

Ricevo risposta da un'applicazione Ruby on Rails. Qui c'è il metodo che sto colpendo

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 

è un qualsiasi cosa che ho bisogno di configurare nella mia applicazione Rails

Answer 1

Ho provato molti tutorial tra cui le risposte di cui sopra, ma non ha avuto fortuna.Così ho implementato qualcosa di simile sotto

Modulo

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

Invia funzione per la forma

<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> 

Nel mio controller

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 

E infine, nel 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 %> 

In questo modo ho chiamato submit_form sul modulo di invio e chiamato show_errors funzione javascript dal server stesso. E funziona .. Ma vorrei ancora avere commenti se questa è la soluzione peggiore?

Answer 2

Stai vicino. Basta usare il success callback come al solito (vedere le ajax docs), non è uno speciale:

$.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 
    } 
}); 

Inoltre, il codice:

jsonpresponse: result() 

... sarebbe chiamata la funzione result e quindi utilizzare il suo valore di ritorno per la proprietà jsonpresponse della chiamata ajax. Se si desidera utilizzare una funzione separata, va bene, ma non si include il (), quindi:

$.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 
} 

Inoltre, sono abbastanza sicuro che non è necessario/voglio il parametro jsonp se si utilizza success, quindi:

$.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 
} 

Infine: Sei sicuro si desidera impostare contentType? Ciò si riferisce al fatto che il contenuto è inviato al server, non al contenuto ricevuto da esso. Se stai davvero postando dati codificati JSON sul server, bene, stai bene; ma sembra che tu stia usando la funzione serialize di jQuery, che non produrrà JSON (produce una stringa di dati con codifica URL). Quindi probabilmente vorrai rimuovere anche contentType, sia dalla chiamata che dalla chiamata ajaxSetup.

Answer 3

spero se si può provare jQuery-JSONP
jQuery-JSONP How To

[Esempio]

$.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); 
     } 
    });