web-dev-qa-db-fra.com

L'événement à succès d'Ajax ne fonctionne pas

J'ai un formulaire d'inscription et j'utilise $.ajax pour l'envoyer.

Ceci est ma demande AJAX:

$(document).ready(function() {
    $("form#regist").submit(function() {
        var str = $("#regist").serialize();
        $.ajax({
            type: 'POST',
            url: 'submit1.php',
            data: $("#regist").serialize(),
            dataType: 'json',
            success: function() {
                $("#loading").append("<h2>you are here</h2>");
            }        
        });
        return false;        
    });
});

Dans mon fichier submit1.php, je vérifie l'existence de champs adresse électronique et nom d'utilisateur dans la base de données . Je souhaite afficher un message d'erreur si ces valeurs existent sans un rafraîchissement de page .

Comment puis-je ajouter ceci au callback success de ma demande AJAX?

171
noobcode

Le résultat n'est probablement pas au format JSON. Par conséquent, lorsque jQuery tente de l'analyser comme tel, il échoue. Vous pouvez intercepter l'erreur avec la fonction de rappel error:.

De toute façon, vous ne semblez pas avoir besoin de JSON dans cette fonction, vous pouvez donc supprimer la ligne dataType: 'json'.

347
Tatu Ulmanen

Bien que le problème soit déjà résolu, j'ajoute ceci dans l'espoir que cela aidera les autres.

J'ai commis l'erreur en essayant d'utiliser une fonction directement comme ceci (success: OnSuccess (productID)). Mais vous devez d'abord passer une fonction anonyme:

  function callWebService(cartObject) {

    $.ajax({
      type: "POST",
      url: "http://localhost/AspNetWebService.asmx/YourMethodName",
      data: cartObject,
      contentType: "application/x-www-form-urlencoded",
      dataType: "html",
      success: function () {
        OnSuccess(cartObject.productID)
      },
      error: function () {
        OnError(cartObject.productID)
      },
      complete: function () {
        // Handle the complete event
        alert("ajax completed " + cartObject.productID);
      }
    });  // end Ajax        
    return false;
  }

Si vous n'utilisez pas une fonction anonyme comme encapsuleur, OnSuccess est appelé même si le service Web renvoie une exception.

16
js newbee

J'ai essayé de supprimer la ligne dataType et cela n'a pas fonctionné pour moi. J'ai contourné le problème en utilisant "complet" au lieu de "succès" comme rappel. Le rappel de succès échoue toujours dans IE, mais depuis que mon script est exécuté et terminé, c'est tout ce qui m'importe.

$.ajax({
    type: 'POST',
    url: 'somescript.php',
    data: someData,
    complete: function(jqXHR) {
       if(jqXHR.readyState === 4) {
          ... run some code ... 
       }   
    }        
 });

dans jQuery 1.5, vous pouvez aussi le faire comme ça.

var ajax = $.ajax({
    type: 'POST',
    url: 'somescript.php',
    data: 'someData'
});
ajax.complete(function(jqXHR){
    if(jqXHR.readyState === 4) {
        ... run some code ... 
    }
});
14
Allen

Assurez-vous de ne pas imprimer (écho ou impression) aucun texte/donnée avant de générer vos données au format JSON dans votre fichier PHP. Cela pourrait expliquer que vous obteniez un message -sucessfull 200 OK-, mais que votre événement succès échoue toujours dans votre javascript. Vous pouvez vérifier ce que votre script reçoit en consultant la section "Réseau - Réponse" de firebug pour POST submit1.php.

11
Delfin

Mettez une alert() dans votre callback success pour vous assurer qu’elle est appelée.

Si ce n'est pas le cas, c'est simplement parce que la demande n'a pas abouti, même si vous réussissez à vous connecter au serveur. Des causes raisonnables peuvent être l’expiration du délai d’expiration ou une erreur dans votre code php génère une exception.

Installez l'addon firebug pour firefox, si ce n'est déjà fait, et examinez le rappel AJAX. Vous pourrez voir la réponse et savoir si elle reçoit une réponse réussie (200 OK). Vous pouvez également mettre une autre alert() dans le callback complete, qui doit certainement être appelé.

4
David Hedlund

J'ai eu le même problème. cela se produit parce que javascript expect json type de données dans le retour des données. mais si vous utilisez echo ou print dans votre php, cette situation se produit. si vous utilisez la fonction echo dans php pour renvoyer des données, supprimez simplement dataType : "json" et travaillez plutôt bien. 

J'ai essayé de retourner la chaîne du contrôleur mais pourquoi le contrôle retournant au bloc d'erreur n'est pas une réussite de ajax

var sownum="aa";
$.ajax({
    type : "POST",
    contentType : 'application/json; charset=utf-8',
    dataType : "JSON",
    url : 'updateSowDetails.html?sownum=' + sownum,
    success : function() {
        alert("Wrong username");
    },
    error : function(request, status, error) {

        var val = request.responseText;
        alert("error"+val);
    }
});
1
user7285134

Je retournais un code JSON valide, obtenant une réponse de 200 dans mon rappel "complet", et pouvais le voir dans la console réseau Chrome ... MAIS je n'avais pas spécifié

dataType: "json"

une fois que je l’ai fait, contrairement à la "réponse acceptée", le problème a effectivement été résolu.

1
sarink

J'ai eu ce problème en utilisant une fonction ajax pour récupérer le mot de passe de l'utilisateur de Magento. L’événement à succès n’a pas été congédié, puis j’ai réalisé qu’il y avait deux erreurs:

  1. Le résultat n'était pas renvoyé au format JSON
  2. J'essayais de convertir un tableau au format JSON, mais ce tableau avait des caractères non-utf

Ainsi, chaque fois que j’essayais d’utiliser json_eoncde () pour encoder le tableau renvoyé, la fonction ne fonctionnait pas car l’un de ses index comportait des caractères non-utf, la plupart d’entre eux accentués dans les mots portugais.

1
Andresa Krul

J'ai rencontré le même problème lors de l'interrogation du contrôleur qui ne renvoie pas de réponse de réussite, lorsque mon contrôleur a été modifié pour renvoyer le message de réussite, le problème a été résolu . Note à l'aide du framework Lavalite. avant:

public function Activity($id)
    {
        $data=getData();
        return
            $this->response->title('title')
                ->layout('layout')
                ->data(compact('data'))
                ->view('view')
                ->output();
    }
after code looks like:
    try {
            $attributes = $request->all();
            //do something
            return $this->response->message('')
                ->code(204)
                ->status('success')
                ->url('url'. $data->id)
                ->redirect();
        } catch (Exception $e) {
            return $this->response->message($e->getMessage())
                ->code(400)
                ->status('error')
                ->url('nothing Wrong')
                ->redirect()
        }

cela a fonctionné pour moi

1
masokaya

J'utilise XML pour reporter le résultat du php sur le serveur à la page Web et j'ai eu le même comportement.

Dans mon cas, la raison en était que la balise de fermeture ne correspondait pas à la balise d'ouverture.

<?php
....
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>
    <result>
        <status>$status</status>
        <OPENING_TAG>$message</CLOSING_TAG>
    </result>";
?>
0
thowa

Ajoutez le rappel 'error' (comme 'success') de cette façon:

$.ajax({
   type: 'POST',
   url: 'submit1.php',
   data: $("#regist").serialize(),
   dataType: 'json',
   success: function() {
      $("#loading").append("<h2>you are here</h2>");
   },
   error: function(jqXhr, textStatus, errorMessage){
      console.log("Error: ", errorMessage);
   }
});

Donc, dans mon cas, j'ai vu dans la console:

Error:  SyntaxError: Unexpected end of JSON input
  at parse (<anonymous>), ..., etc.
0
Vlado

Vous devez déclarer à la fois le rappel de succès et d'erreur. Ajouter

error: function(err) {...} 

devrait résoudre le problème

0
JeffNhan

J'ai eu le même problème que j'ai résolu de cette façon: Mon ajax: 

event.preventDefault();
$.ajax('file.php', {
method: 'POST',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({tab}), 
success: function(php_response){
            if (php_response == 'item') 
                {
                    console.log('it works');
                }
            }
        })

D'accord. Le problème n'est pas avec JSON mais seulement avec la réponse php . Avant: ma réponse php était: 

echo 'item';

À présent: 

$variable = 'item';
 echo json.encode($variable);

Maintenant que mon succès fonctionne ... PS. Désolé si quelque chose ne va pas mais c'est mon premier commentaire sur ce forum :)

0
silkykg

dans mon cas, l'erreur était c'était du côté serveur et pour cette raison, il retournait un fichier HTML

wp_nonce_field(basename(__FILE__), "mu-meta-box-nonce");
0
Emiliano Barboza