web-dev-qa-db-ja.com

jQuery Ajaxの投稿データを介してJSONをPHPでエンコードするにはどうすればよいですか？

HTMLフォームがあり、送信ボタンを押すとphpファイルにデータを送信します。

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

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

結果は[オブジェクトオブジェクト]です。次のようなタイプが必要です：

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

私は何を間違えましたか？

javascriptphpjqueryajaxjson
9
SPG

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

オブジェクトはおそらく適切に渡されています。 @Spudleyが説明したように、_[object object]_を返す結果をキャプチャする方法です。コンソールはコンストラクトの表示方法を認識しませんが、_object.attribute_構文を使用して特定の属性を表示できます。プリティファイされた出力には、JS側でconsole.log()を使用するか、以下のコードを使用します。

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

（Unix）シェルスクリプトでJSONをきれいに印刷するにはどうすればよいですか

また、どこかにバグがあると感じた場合は、ajaxハンドラーのdataTypeを一時的に削除してください。 GETリクエストで表示する出力を取得する必要があります。データベースの削除や変更などを変更する操作の場合、これをPOSTに戻します。

最後に、@ GroovyCarrotの回答に示されているようにヘッダーを変更します。 Chromeを使用している場合、余分な空白はバグと思われます： ChromeのJSON出力をタブおよび事前にラップ

4
James P.

追加してみてください

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

PHPスクリプトの上部で、何が返されるかを確認してください

お役に立てば幸いです！

編集：次のように値にアクセスする必要があることを忘れていました：data.amount

2
GroovyCarrot

JSONオブジェクトをdomに直接挿入することはできません。 JSONオブジェクトtoString()メソッドは常にu [オブジェクトオブジェクト]を提供するため、これを取得しています。 JSON.stringify(data)を使用してデータを解析するか、$.each(data,function(val){ $("#result").append(val) })を実行する必要があります。

1
Harry Bomrah

結果のオブジェクトを表示する代わりに文字列に変換しています。

結果の代わりに、ラッパー内に印刷オブジェクトが必要な場合は、次のようなことができます：

var text = '{';

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

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

text += '}';

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

ただし、console.logは、json形式で応答を確認するためのはるかに簡単で高速な方法です。

0
baldrs