2011-03-16 28 views
8
 <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> 

Tengo el guión anterior preguntando por el dominio y publicando datos dentro de un formulario.
Todo parece funcionar bien. La respuesta JSON se puede ver en la consola Firebug. Quiero procesar la respuesta y mostrar los mensajes de estado según corresponda al usuario. ¿Cómo debería lograrlo?Leer dominio cruzado Respuesta de JSON


ACTUALIZACIÓN

me han tratado como sugiere T. J. Crowder pero todavía no tiene suerte. El código modificado es la siguiente

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

Esto no data accesos y alertas undefined. Si intento pasarlo desde success: handleSuccess(), se produce un error y se redirecciona con una solicitud http.

Recibo respuesta de una aplicación Ruby on Rails. Aquí no es el método que estoy golpeando

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 

Hay alguna cosa que necesito configurar en mi rieles aplicación

Respuesta

0

He intentado muchas clases particulares incluyendo las respuestas anteriores pero no tuvo suerte.Así que he implementado algo así como más adelante

Formulario

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

función de presentar para su 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> 

En mi controlador

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 

Y finalmente en 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 %> 

De esta manera llamé a submit_form en el formulario de envío y llamé a show_errors función de javascript desde el servidor en sí. Y funciona .. Pero aún así me gustaría tener comentarios si esta es la peor solución?

4

Estás cerca. Sólo tiene que utilizar la devolución de llamada success como de costumbre (ver los documentos ajax), no es una persona especial:

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

Además, su código:

jsonpresponse: result() 

... haría llamada y la función result luego use su valor de retorno para la propiedad jsonpresponse de la llamada ajax. Si desea utilizar una función separada, está bien, pero que no incluyen el (), por lo que:

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

Además, estoy bastante seguro de que no necesita/quiere el parámetro jsonp si utiliza success, por lo que:

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

Por último: ¿Estás seguro de desea establecer contentType? Eso se relaciona con el contenido que es enviado a el servidor, no el contenido que se recibe de él. Si realmente está publicando datos codificados en JSON en el servidor, genial, está bien; pero parece que está utilizando la función serialize de jQuery, que no producirá JSON (produce una cadena de datos con codificación URL). Por lo tanto, probablemente también desee eliminar contentType, tanto de la llamada como de la llamada ajaxSetup.

+0

Aquí hay un ejemplo en vivo de una llamada JSONP: http://jsbin.com/otehi4 –

+0

Probé casi todo, pero aún no tengo suerte. Se actualizó la pregunta con los esfuerzos realizados – Pravin

+0

@Pravin: Todavía está poniendo '()' después del nombre de la función del manejador ('success: handleSuccess()'). Como dije en la respuesta anterior, * llama * a la función 'handleSuccess' inmediatamente (antes de la llamada ajax) y asigna su valor de retorno a la opción' success' a 'ajax'. Para hacer referencia a una función sin llamarla, deje '()' desactivado (por ejemplo, 'success: handleSuccess'). –

1

espero que si se puede tratar jQuery-JSONP
jQuery-JSONP How To

[Ejemplo]

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