javascript jquery - La solicitud de Ajax devuelve 200 OK, pero se desencadena un evento de error en lugar de éxito




post get (14)

He tenido algo de suerte con el uso de varios jQuery.ajax (tipo de datos separados por jQuery.ajax ) ( jQuery.ajax ). Como en:

$.ajax({
    type: 'POST',
    url: 'Jqueryoperation.aspx?Operation=DeleteRow',
    contentType: 'application/json; charset=utf-8',
    data: json,
    dataType: 'text json',
    cache: false,
    success: AjaxSucceeded,
    error: AjaxFailed
});

He implementado una solicitud de Ajax en mi sitio web, y estoy llamando al punto final desde una página web. Siempre devuelve 200 OK , pero jQuery ejecuta el evento de error. Probé muchas cosas, pero no pude resolver el problema. Estoy agregando mi código a continuación:

jQuery Code

var row = "1";
var json = "{'TwitterId':'" + row + "'}";
$.ajax({
    type: 'POST',
    url: 'Jqueryoperation.aspx?Operation=DeleteRow',
    contentType: 'application/json; charset=utf-8',
    data: json,
    dataType: 'json',
    cache: false,
    success: AjaxSucceeded,
    error: AjaxFailed
});
function AjaxSucceeded(result) {
    alert("hello");
    alert(result.d);
}
function AjaxFailed(result) {
    alert("hello1");
    alert(result.status + ' ' + result.statusText);
}

Código C # para JqueryOpeartion.aspx

protected void Page_Load(object sender, EventArgs e) {
    test();
}
private void test() {
    Response.Write("<script language='javascript'>alert('Record Deleted');</script>");
}

Necesito la cadena ("Record deleted") después de la eliminación exitosa. Puedo eliminar el contenido, pero no recibo este mensaje. ¿Es correcto o estoy haciendo algo mal? ¿Cuál es la forma correcta de resolver este problema?


Su script exige una devolución en el tipo de datos JSON.

Prueba esto:

private string test() {
  JavaScriptSerializer js = new JavaScriptSerializer();
 return js.Serialize("hello world");
}

Tuve el mismo problema. Mi problema era que mi controlador estaba devolviendo un código de estado en lugar de JSON. Asegúrese de que su controlador devuelve algo como:

public JsonResult ActionName(){
   // Your code
   return Json(new { });
}

He enfrentado este problema con una biblioteca de jQuery actualizada. Si el método de servicio no devuelve nada, significa que el tipo de retorno es void .

Luego, en su llamada Ajax, mencione dataType='text' .

Se resolverá el problema.


Otra cosa que me estropeó las cosas fue usar localhost lugar de 127.0.0.1 o viceversa. Al parecer, JavaScript no puede manejar las solicitudes de uno a otro.


Reconozco que su página aspx no devuelve un objeto JSON. Tu página debería hacer algo como esto (page_load)

var jSon = new JavaScriptSerializer();
var OutPut = jSon.Serialize(<your object>);

Response.Write(OutPut);

Además, intenta cambiar tu AjaxFailed:

function AjaxFailed (XMLHttpRequest, textStatus) {

}

textStatus debería darle el tipo de error que está recibiendo.


Solo tiene que eliminar dataType: 'json' de su encabezado si su método de servicio web implementado es nulo.

En este caso, la llamada Ajax no espera tener un tipo de datos de retorno JSON.


Use el siguiente código para asegurarse de que la respuesta esté en formato JSON (versión PHP) ...

header('Content-Type: application/json');
echo json_encode($return_vars);
exit;

Tengo el problema similar, pero cuando intenté eliminar el tipo de datos: 'json' todavía tengo el problema. Mi error se está ejecutando en lugar del éxito

function cmd(){
    var data = JSON.stringify(display1());
    $.ajax({
        type: 'POST',
        url: '/cmd',
        contentType:'application/json; charset=utf-8',
        //dataType:"json",
        data: data,
        success: function(res){
                  console.log('Success in running run_id ajax')
                  //$.ajax({
                   //   type: "GET",
                   //   url: "/runid",
                   //   contentType:"application/json; charset=utf-8",
                   //   dataType:"json",
                   //   data: data,
                   //  success:function display_runid(){}
                  // });
        },
        error: function(req, err){ console.log('my message: ' + err); }
    });
}

Simplemente tienes que eliminar el dataType: "json" en tu llamada AJAX

$.ajax({
    type: 'POST',
    url: 'Jqueryoperation.aspx?Operation=DeleteRow',
    contentType: 'application/json; charset=utf-8',
    data: json,
    dataType: 'json', //**** REMOVE THIS LINE ****//
    cache: false,
    success: AjaxSucceeded,
    error: AjaxFailed
});

Ver esto También es un problema similar. Trabajando lo intenté.

No elimine dataType: 'JSON',

Nota: solo se hace eco de JSON Formate en el archivo PHP si solo usa php echo su código ajax return 200


jQuery.ajax intenta convertir el cuerpo de la respuesta según el parámetro dataType especificado o el encabezado Content-Type enviado por el servidor. Si la conversión falla (por ejemplo, si el JSON / XML no es válido), se desencadena la devolución de llamada de error.

Su código AJAX contiene:

dataType: "json"

En este caso jQuery:

Evalúa la respuesta como JSON y devuelve un objeto JavaScript. […] Los datos JSON se analizan de manera estricta; cualquier JSON con formato incorrecto se rechaza y se produce un error de análisis. […] Una respuesta vacía también es rechazada; el servidor debería devolver una respuesta de nulo o {} en su lugar.

Su código del lado del servidor devuelve un fragmento de código HTML con 200 OK estados 200 OK . jQuery esperaba JSON válido y, por lo tanto, dispara el error de devolución de llamada quejándose de parseerror .

La solución es eliminar el parámetro dataType de su código jQuery y devolver el código del lado del servidor:

Content-Type: application/javascript

alert("Record Deleted");

Pero prefiero sugerir devolver una respuesta JSON y mostrar el mensaje dentro de la devolución de llamada correcta:

Content-Type: application/json

{"message": "Record deleted"}

Si siempre devuelve JSON desde el servidor (no hay respuestas vacías), dataType: 'json' debería funcionar y contentType no es necesario. Sin embargo, asegúrese de que la salida JSON ...

jQuery AJAX lanzará un 'parseerror' en JSON válido pero no serializado!


Nota: Esta respuesta fue escrita en febrero de 2010.
Ver actualizaciones de 2015, 2016 y 2017 en la parte inferior.

No se puede devolver nada de una función que es asíncrona. Lo que puedes devolver es una promesa . Expliqué cómo funcionan las promesas en jQuery en mis respuestas a esas preguntas:

Si pudiera explicar por qué quiere devolver los datos y qué quiere hacer con ellos más adelante, entonces podría darle una respuesta más específica sobre cómo hacerlo.

Generalmente, en lugar de:

function testAjax() {
  $.ajax({
    url: "getvalue.php",  
    success: function(data) {
      return data; 
    }
  });
}

Puedes escribir tu función testAjax así:

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

Entonces puedes obtener tu promesa así:

var promise = testAjax();

Puede almacenar su promesa, puede pasarla, puede usarla como un argumento en llamadas a funciones y puede devolverla desde funciones, pero cuando finalmente quiera usar los datos que devuelve la llamada AJAX, debe: Hazlo asi:

promise.success(function (data) {
  alert(data);
});

(Ver actualizaciones a continuación para la sintaxis simplificada.)

Si sus datos están disponibles en este punto, esta función se invocará de inmediato. Si no es así, se invocará tan pronto como los datos estén disponibles.

El objetivo de hacer todo esto es que sus datos no están disponibles inmediatamente después de la llamada a $ .ajax porque son asíncronos. Promises es una buena abstracción para que las funciones digan: no puedo devolverte los datos porque aún no los tengo, no quiero bloquearlos y hacerte esperar, así que aquí hay una promesa y podrás Utilícelo más tarde, o simplemente para dárselo a alguien más y terminar con él.

Ver esta DEMO .

ACTUALIZACIÓN (2015)

Actualmente (a partir de marzo de 2015) jQuery Promises no es compatible con la especificación Promises / A +, lo que significa que no pueden cooperar muy bien con otras implementaciones conformes con Promises / A + .

Sin embargo, jQuery Promises en la próxima versión 3.x será compatible con la especificación Promises / A + (gracias a Benjamin Gruenbaum por señalarlo). Actualmente (a partir de mayo de 2015) las versiones estables de jQuery son 1.xy 2.x.

Lo que expliqué anteriormente (en marzo de 2011) es una forma de usar los Objetos Aplazados de jQuery para hacer algo asincrónicamente que en código síncrono se lograría devolviendo un valor.

Pero una llamada de función síncrona puede hacer dos cosas: puede devolver un valor (si puede) o lanzar una excepción (si no puede devolver un valor). Promises / A + aborda ambos casos de uso de una manera que es tan poderosa como el manejo de excepciones en código síncrono. La versión jQuery maneja el equivalente de devolver un valor bien, pero el equivalente al manejo complejo de excepciones es algo problemático.

En particular, el punto principal de la gestión de excepciones en el código síncrono no es solo renunciar a un buen mensaje, sino tratar de solucionar el problema y continuar con la ejecución, o posiblemente volver a generar la misma excepción o una excepción diferente para algunas otras partes del programa. encargarse de. En código síncrono tienes una pila de llamadas. En las llamadas asíncronas, el manejo avanzado de excepciones dentro de sus promesas, tal como lo exige la especificación Promises / A +, realmente puede ayudarlo a escribir código que maneje errores y excepciones de manera significativa incluso en casos de uso complejos.

Para conocer las diferencias entre jQuery y otras implementaciones, y cómo convertir las promesas de jQuery en el cumplimiento de Promises / A +, consulte Coming from jQuery por Kris Kowal et al. en la wiki de la biblioteca Q y las promesas llegan a JavaScript por Jake Archibald en HTML5 Rocks.

Cómo devolver una promesa real

La función de mi ejemplo anterior:

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

devuelve un objeto jqXHR, que es un objeto diferido jQuery.

Para hacer que se vuelva una promesa real, puede cambiarla a - usando el método de la wiki de Q :

function testAjax() {
  return Q($.ajax({
      url: "getvalue.php"
  }));
}

o, usando el método del artículo HTML5 Rocks :

function testAjax() {
  return Promise.resolve($.ajax({
      url: "getvalue.php"
  }));
}

Este Promise.resolve($.ajax(...)) también es lo que se explica en la documentación del módulo de promise y debería funcionar con ES6 Promise.resolve() .

Para usar las promesas de ES6 hoy, puede usar polyfill() del módulo es6-promise de Jake Archibald.

Para ver dónde puede usar las promesas de ES6 sin el polyfill, vea: ¿Puedo usar: promesas ?

Para más información ver:

Futuro de jQuery

Las versiones futuras de jQuery (a partir de 3.x - las versiones estables actuales a partir de mayo de 2015 son 1.xy 2.x) serán compatibles con la especificación Promises / A + (gracias a Benjamin Gruenbaum por señalarlo en los comentarios). "Dos cambios que ya hemos decidido son la compatibilidad con Promise / A + para nuestra implementación diferida [...]" ( jQuery 3.0 y el futuro del desarrollo web ). Para obtener más información, consulte: jQuery 3.0: The Next Generations de Dave Methvin y jQuery 3.0: Más interoperabilidad, menos Internet Explorer de Paul Krill.

Charlas interesantes

ACTUALIZACIÓN (2016)

Hay una nueva sintaxis en ECMA-262, 6ª Edición, Sección 14.2, llamadas funciones de flecha que pueden usarse para simplificar aún más los ejemplos anteriores.

Usando la API de jQuery, en lugar de:

promise.success(function (data) {
  alert(data);
});

puedes escribir:

promise.success(data => alert(data));

o usando las promesas / A + API:

promise.then(data => alert(data));

Recuerde usar siempre los controladores de rechazo con:

promise.then(data => alert(data), error => alert(error));

o con:

promise.then(data => alert(data)).catch(error => alert(error));

Vea esta respuesta para ver por qué siempre debe usar los controladores de rechazo con promesas:

Por supuesto, en este ejemplo, podría usar justa promise.then(alert) porque solo está llamando a alert con los mismos argumentos que su devolución de llamada, pero la sintaxis de la flecha es más general y le permite escribir cosas como:

promise.then(data => alert("x is " + data.x));

No todos los navegadores admiten esta sintaxis todavía, pero hay ciertos casos en los que estás seguro de en qué navegador se ejecutará tu código, por ejemplo, al escribir una extensión de Chrome , un complemento de Firefox o una aplicación de escritorio con Electron, NW.js o AppJS (ver esta respuesta para más detalles).

Para el soporte de funciones de flecha, ver:

ACTUALIZACIÓN (2017)

Ahora hay una sintaxis aún más nueva llamada funciones asíncronas con una nueva palabra clave de await que en lugar de este código:

functionReturningPromise()
    .then(data => console.log('Data:', data))
    .catch(error => console.log('Error:', error));

te permite escribir:

try {
    let data = await functionReturningPromise();
    console.log('Data:', data);
} catch (error) {
    console.log('Error:', error);
}

Solo puede usarlo dentro de una función creada con la palabra clave async . Para más información, ver:

Para soporte en los navegadores, ver:

Para soporte en Nodo, ver:

En lugares donde no tienes soporte nativo para async y await puedes usar Babel:

o con una sintaxis ligeramente diferente, un enfoque basado en generador como en co o Bluebird coroutines:

Más información

Algunas otras preguntas sobre promesas para más detalles:





javascript jquery asp.net ajax json