web-dev-qa-db-fra.com

Comment encoder JSON en PHP via les données de publication jQuery Ajax?

J'ai un formulaire HTML et envoie des données au fichier php lorsque je clique sur le bouton soumettre.

$.ajax({
    url: "text.php",
    type: "POST",
    data: {
        amount: amount,
        firstName: firstName,
        lastName: lastName,
        email: email
    },
    dataType: "JSON",
    success: function (data) {
        console.log("ok");
        $("#result").text(data);
    }
});

En PHP:

<?php
    $amount      = $_POST["amount"];
    $firstName   = $_POST["firstName"];
    $lastName    = $_POST["lastName"];
    $email       = $_POST["email"];
    if(isset($amount)){
        $data = array(
            "amount"     => $amount,
            "firstName"  => $firstName,
            "lastName"   => $lastName,
            "email"      => $email
        );
        echo json_encode($data);
    }
?>

Le résultat est [objet objet]. Je veux un type comme:

{"Amount":"12.34", "FirstName":"Any", "LastName":"Tester", "Email":"[email protected]"}

Qu'est ce que j'ai mal fait?

javascriptphpjqueryajaxjson
9
SPG

Exemple de code avec JSON.stringify:

<html>
    <head>
       <title>jQuery Test</title>
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
       <script type="text/javascript">
           $(document).ready(function() {
               $("#submit").click(function(){
                   $.ajax({
                       url: "text.php",
                       type: "POST",
                       data: {
                           amount: $("#amount").val(),
                           firstName: $("#firstName").val(),
                           lastName: $("#lastName").val(),
                           email: $("#email").val()
                       },
                       dataType: "JSON",
                       success: function (jsonStr) {
                           $("#result").text(JSON.stringify(jsonStr));
                       }
                   });
               });
           });
       </script>
    </head>

    <body>
        <div id="result"></div>
        <form name="contact" id="contact" method="post">
            Amount: <input type="text" name="amount" id="amount"/><br/>
            firstName: <input type="text" name="firstName" id="firstName"/><br/>
            lastName: <input type="text" name="lastName" id="lastName"/><br/>
            email: <input type="text" name="email" id="email"/><br/>
            <input type="button" value="Get It!" name="submit" id="submit"/>
        </form>
    </body>
</html>

text.php

<?php
    $amount      = $_POST["amount"];
    $firstName   = $_POST["firstName"];
    $lastName    = $_POST["lastName"];
    $email       = $_POST["email"];
    if(isset($amount)){
        $data = array(
            "amount"     => $amount,
            "firstName"  => $firstName,
            "lastName"   => $lastName,
            "email"      => $email
        );
        echo json_encode($data);
    }
?>
20
Jenson M John

Votre objet est très probablement passé correctement. C'est la façon dont vous capturez le résultat qui renvoie [object object] Comme @Spudley l'a expliqué. La console ne sait pas comment afficher la construction mais vous pouvez afficher des attributs spécifiques en utilisant la syntaxe object.attribute. Utilisez console.log() du côté JS ou le code ci-dessous pour une sortie prettifiée.

// Indent with tabs
// Data is the parameter sent to the success function in the ajax handler
JSON.stringify( data , null, '\t');

De Comment puis-je joli-imprimer JSON dans le script Shell (unix)?

Supprimez également temporairement dataType sur le gestionnaire ajax si vous sentez qu'il y a un bogue quelque part. Obtenir la sortie à afficher sur une demande GET devrait suffire. Remplacez-le par POST pour toute opération qui modifie quelque chose comme une suppression ou une modification de base de données.

Enfin, modifiez l'en-tête comme indiqué dans la réponse de @ GroovyCarrot. Si vous utilisez Chrome l'espace blanc supplémentaire semble être un bug: Tabulation et pré-enroulé autour de la sortie JSON dans Chrome

4
James P.

Essayez d'ajouter

header('Content-type: application/json');

En haut de votre script PHP et voyez ce que vous obtenez en retour

J'espère que cela pourra aider!

Modifier: J'ai oublié de mentionner que vous devez accéder à vos valeurs comme suit: data.amount

2
GroovyCarrot

Vous ne pouvez pas insérer directement un objet JSON dans un dom. La méthode JSON object toString() donnera toujours u [object object], c'est pourquoi vous obtenez ceci. Vous devez analyser les données en utilisant JSON.stringify(data) ou vous devez exécuter $.each(data,function(val){ $("#result").append(val) }).

1
Harry Bomrah

Vous convertissez l'objet résultant en chaîne au lieu de l'afficher.

Au lieu du résultat, si vous voulez imprimer un objet dans un wrapper, vous pouvez faire quelque chose comme ceci:

var text = '{';

for(var i in data) {
  var value = data[i];

  text += '"'+i+'":"'+value+'", ';
}

text += '}';

$('#result').text(text);

Mais vous pouvez considérer que console.log est un moyen beaucoup plus simple et plus rapide de voir la réponse au format json.

0
baldrs