1

私のファイルには、次のようなjqueryスクリプトがあります。

<script type="text/javascript">
$(document).ready(function(e){
    $('#myButton').click(function(e){
        var formdata = {name: 'Alan', hobby: 'boxing'};
        var submiturl = 'http://localhost/cake/gronsters/testJSON/';
        $.ajax({
            type: "POST", 
            url: submiturl,
            data: formdata,
            success: function(message){
                console.log(message);
            }
        });
        e.preventDefault();
    })
});

次に、testJSON に次のような php スクリプトがあります。

public function testJSON(){
    $name = $this->request->data['name'] . '-Sue';
    $hobby = $this->request->data['hobby'] . ' for donuts';
    $data = array(  'name' => $name, 'hobby' => $hobby);
    echo json_encode($data);
}

console.log がメッセージを検索する場所には、{"name":"Alan-Sue","hobby":"boxing for donuts"} というメッセージが表示されます。これは正しいようですが、その直後に私の Web ページの完全な html が続きます。 . console.log(message.name) を試してみると、「未定義」と表示されます。

何が起きてる？

4

3 に答える 3

3

あなたの /testJSON/ ページは、パブリック関数に書かれている以上のものを出力しているようです。mvc または何らかの種類のフレームワークを使用している場合は、json_encode をエコーし​​た後、すぐに終了するか終了する必要があります。そうしないと、おそらくページの他の部分がレンダリングされます。

于 2012-08-07T22:31:42.193 に答える
2

あなたは正しい道を進んでいますが、他の人が述べたように、Web サイトに MVC フレームワークを使用しているようで、JSON 文字列を表示した後に Web ページのコンテンツを含めています。応答に他のランダムなテキストまたは文字がある場合、jQuery/JavaScript は JSON を解析できません。次の例に示すように、JSON がエコーされた後にexit;orを使用する必要があります...die();

public function testJSON(){
    $name = $this->request->data['name'] . '-Sue';
    $hobby = $this->request->data['hobby'] . ' for donuts';
    $data = array(  'name' => $name, 'hobby' => $hobby);
    // Will halt the script and echo the json-encoded data.
    die(json_encode($data));
}

また、jQuery が応答を JSON として解析していることを確認する必要があります。デフォルトでは、返されるデータのタイプをインテリジェントに推測しようとしますが、常にそれに頼ることはできません。dataType次の例のように、オプションを AJAX 呼び出しに追加する必要があります...

<script type="text/javascript">
$(document).ready(function(e){
    $('#myButton').click(function(e){
        // It is best practice to "preventDefault" before any code is executed.
        // It will not cause the ajax call to halt.
        e.preventDefault();
        var formdata = {name: 'Alan', hobby: 'boxing'};
        var submiturl = 'http://localhost/cake/gronsters/testJSON/';
        $.ajax({
            type: "POST", 
            url: submiturl,
            data: formdata,
            // This is the proper data type for JSON strings.
            dataType: 'json',
            success: function(message){
                // JSON is parsed into an object, so you cannot just output
                // "message" as it will just show "[object Object]".
                console.log(message.name);
            }
        });
    });
});
</script>

説明をわかりやすくするために、コードにいくつかのコメントを含めました。うまくいけば、これはあなたをもう少し助けるでしょう. $.ajaxまた、関数内でエラー ハンドラやその他の高度なオプションを使用する予定がない限り、完全な関数を使用する必要はありません。または、 を使用してコードを短縮し$.post、より少ないコードで元の例と同じことを達成できます。

<script type="text/javascript">
$(document).ready(function() {
    $('#myButton').click(function(e){
        e.preventDefault();
        var formdata = {name: 'Alan', hobby: 'boxing'};
        var submiturl = 'http://localhost/cake/gronsters/testJSON/';

        $.post(submiturl, formdata, function(message) {
            console.log(message.name);
        });

    });
});
</script>

$.ajax jQuery.ajax();に関するその他のオプションと使用方法に関する情報。jQuery.post();
に関する詳細情報$.post

于 2012-08-07T23:15:41.010 に答える
0

message.name をログに記録する前に、メッセージ変数を json として解析します。

data = $.parseJSON(message);
console.log(data.name);

また、echo ステートメントの後に php スクリプトで exit を実行し、..

于 2012-08-07T22:32:15.813 に答える