L'événement de réussite Ajax ne fonctionne pas

194

J'ai un formulaire d'inscription et j'utilise $.ajaxpour le soumettre.

C'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 e-mail et nom d'utilisateur dans la base de données. Je souhaite afficher un message d'erreur si ces valeurs existent sans actualisation de la page .

Comment puis-je ajouter cela au rappel de réussite de ma demande AJAX?

codagebbq
la source
2
Êtes-vous sûr que le rappel de réussite est appelé?
rahul
Vous devez poser une nouvelle question pour votre deuxième problème.
Mike Lyons

Réponses:

390

Le résultat n'est probablement pas au format JSON, donc lorsque jQuery tente de l'analyser en tant que tel, il échoue. Vous pouvez attraper l'erreur avec la error:fonction de rappel.

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

Tatu Ulmanen
la source
14
J'ai changé le dataType en texte et je l'ai fait fonctionner. comme çadataType:'text'
Magesh
+1 même mon, mais sur un code qui n'était pas le mien, j'ai résolu en renvoyant les données json du serveur
albanx
4
Cela peut également se produire si a dataType:n'est pas spécifié, mais qu'il url:se termine par .json.
davetapley
1
Également dans l' $.postalias, la fourniture en jsontant que type de données sans json réel provenant du serveur ne déclenche pas de successrappel
Baldrs
Si vous voulez faire une requête json ajax, assurez-vous que son type mime est défini sur application / json. Cela m'a posé quelques problèmes.
Gellweiler
19

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

J'ai fait l'erreur et j'ai essayé d'utiliser une fonction directement comme celle-ci (succès: 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 de fonction anonyme comme wrapper, OnSuccess est appelé même si le webservice renvoie une exception.

js newbee
la source
5
cela n'a rien à voir avec ajax, ni jquery, ni handlers. Nous pourrions tout aussi bien avoir un commentaire rappelant que "tout le code doit être enveloppé dans une balise de script". L'explication est fausse: vous n'avez rien à envelopper dans des fonctions anonymes, une fonction nommée fera l'affaire, tant que vous la passerez au lieu de l'appeler. De plus, c'est trompeur: OnSuccess est appelé avant même que la demande ne soit envoyée, donc cela n'a aucun sens de le relier au service Web renvoyant quoi que ce soit.
fdreger
Cette réponse m'a aidé, mais je n'ai pas voté pour, vous devriez mettre à jour votre réponse en fonction du commentaire @fdreger.
Ozair Kafray
15

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 comme mon script s'exécute et se termine de toute façon, 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 également le faire comme ceci.

var ajax = $.ajax({
    type: 'POST',
    url: 'somescript.php',
    data: 'someData'
});
ajax.complete(function(jqXHR){
    if(jqXHR.readyState === 4) {
        ... run some code ... 
    }
});
Allen
la source
9
Juste une note à ce sujet. completesera toujours appelé, que l'appel ajax ait réussi ou non, alors qu'il successn'est appelé que si le serveur Web répond avec un 200 OKen-tête HTTP (tout est OK).
katalin_2003
10

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

Delfin
la source
Cela m'a vraiment aidé. Je sais que c'est une vieille réponse, mais c'était exactement le problème que j'avais eu. Utiliser les échos ou print_r pendant le débogage et découvrir que ceux-ci causent réellement le bogue ... :) Merci!
lennyklb
6 ans plus tard et toujours en train d'aider les gens avec cette réponse! Je n'aurais pas su où chercher autrement.
Tania Rascia
5

Mettez un alert()dans votre successrappel pour vous assurer qu'il est appelé.

Si ce n'est pas le cas, c'est simplement parce que la requête n'a pas du tout abouti, même si vous parvenez à atteindre le serveur. Les causes raisonnables pourraient être qu'un délai d'expiration expire, ou quelque chose dans votre code php lève une exception.

Installez l'addon firebug pour firefox, si vous ne l'avez pas déjà fait, et inspectez le rappel AJAX. Vous pourrez voir la réponse et savoir si elle reçoit ou non une réponse réussie (200 OK). Vous pouvez également en mettre un autre alert()dans le complete callback, qui doit certainement être appelé.

David Hedlund
la source
Merci pour votre réponse. J'ai essayé l'alerte en cas de succès, mais cela n'a pas fonctionné. J'ai un addon firebug pour firefox et il reçoit une réponse réussie (200 OK) donc pas de problèmes là-bas .. J'ai une fonction die appelée dans mon fichier php pour toute erreur et quand je la vérifie dans firebug, elle montre une réponse appropriée. qu'entendez-vous par "Vous pouvez également mettre une autre alerte () dans le callback complet, qui devrait certainement être invoqué." ?? Merci beaucoup pour une réponse rapide
codingbbq
2
si vous ne voyez pas l'alerte dans votre success, alors ce n'est pas un succès. comme la réponse est 200 OK, la réponse de Tatu semble raisonnable, mais pour un dépannage supplémentaire, vous pouvez utiliser un autre événement, appelé completequi est toujours invoqué, indépendamment du fait qu'une demande réussisse ou non ( successne se produit que si la demande réussit). complete: function (xhr, status) { alert('complete: '+status); }
David Hedlund
3

J'ai eu le même problème. cela se produit car javascriptattendez jsonle type de données dans le renvoi des données. mais si vous utilisez echo ou print dans votre PHP, cette situation se produit. si vous utilisez la echofonction phppour renvoyer des données, supprimez simplement le dataType : "json"travail assez bien.

Thusitha Wickramasinghe
la source
2

Je retournais un JSON valide, obtenant une réponse de 200 dans mon rappel "complet", et je 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», cela a en fait résolu le problème.

couler
la source
1

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

Dans mon cas, la raison é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>";
?>
Thowa
la source
1

J'ai eu ce problème en utilisant une fonction ajax pour récupérer le mot de passe utilisateur de Magento. L'événement de succès n'était pas déclenché, alors 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 contenait des caractères non utf

Ainsi, chaque fois que j'essayais d'utiliser json_eoncde () pour encoder le tableau de retour, la fonction ne fonctionnait pas car l'un de ses index avait des caractères non utf, la plupart accentués dans les mots portugais brésiliens.

Andresa Martins
la source
1

J'ai essayé de renvoyer la chaîne du contrôleur mais pourquoi le contrôle revenant au bloc d'erreur n'a pas réussi à 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);
    }
});
user7285134
la source
1

J'ai rencontré le même problème lors de l'interrogation du contrôleur qui ne retourne pas de réponse de succès, lors de la modification de mon contrôleur pour renvoyer le problème du message de réussite a été résolu. note en utilisant le cadre 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

masokaya
la source
1

J'ai eu le même problème que je l'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';

Maintenant:

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

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

soyeuxkg
la source
0

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

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

Ajoutez un rappel 'erreur' (tout comme 'succès') 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 en console:

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

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

error: function(err) {...} 

devrait résoudre le problème

JeffNhan
la source
-4

Le rappel de succès prend deux arguments:

success: function (data, textStatus) { }

Assurez-vous également que le submit1.phpdéfinit l'en-tête de type de contenu approprié:application/json

Darin Dimitrov
la source
Merci pour votre réponse. J'ai lu à ce sujet sur jquery ajax documentaion mais je ne peux pas comprendre quelle devrait être ma prochaine étape pour le faire fonctionner ... je vous serais reconnaissant si vous pouviez m'indiquer la bonne direction. Cela signifie également que je devrais avoir un code spécifique dans mon fichier php? merci beaucoup
codingbbq
7
le fait que cela successprenne deux arguments semble totalement sans rapport avec la question. Vous pouvez transmettre n'importe quelle quantité de paramètres à une fonction javascript, quel que soit le nombre qu'elle accepte dans sa déclaration, ce n'est donc certainement pas la cause de ces problèmes, et comme aucune des valeurs dataou textStatusn'est utilisée dans le rappel de succès, il semble aucune bonne raison de les déclarer dans la fonction.
David Hedlund
Et les données JSON n'ont pas besoin d'avoir un en-tête de type de contenu correct, elles doivent simplement être au format JSON.
Tatu Ulmanen