php - 私のjquery ajax関数を修正する方法他の関数は機能しますが、ajaxは機能しませんでした

Question

---------------------------PHPコード------------------- ------:

    <?php

$wtype = $_POST['wtype'];

$attributes = array();

if($wtype == 'Ninja'){
    $attributes['health'] = '40-60';
    $attributes['attack'] = '60-70';
    $attributes['defense'] = '20-30';
    $attributes['speed'] = '90-100';
    $attributes['evade'] = '0.3-0.5';
}
else if($wtype == 'Samurai'){
    $attributes['health'] = '60-100';
    $attributes['attack'] = '75-80';
    $attributes['defense'] = '35-40';
    $attributes['speed'] = '60-80';
    $attributes['evade'] = '0.3-0.4';
}
else if($wtype == 'Brawler'){
    $attributes['health'] = '90-100';
    $attributes['attack'] = '65-75';
    $attributes['defense'] = '40-50';
    $attributes['speed'] = '40-65';
    $attributes['evade'] = '0.3-0.35';
}

echo json_encode($attributes);

?>

-------------------------------HTMLコード---------------------- ------:

 <div id="warriors">
        <form id="blue_team">
            <p>
                <label class="team">Blue Team</label>
            </p>
            <p>
                <a href="#Naruto"><img class="blue_img" src="resources/naruto.png" title="Ninja" alt="Naruto"></a>
                <a href="#Sasuke"><img class="blue_img" src="resources/sasuke.png" title="Samurai" alt="Sasuke"></a>
                <a href="#Sakura"><img class="blue_img" src="resources/sakura.png" title="Brawler" alt="Sakura"></a>
            </p>
            <p>
                <label>Name:</label>
                    <input id="blue_name" type="text" readonly="readonly">
                <label>Type:</label>
                    <input id="blue_type" type="text" readonly="readonly">
            </p>
        </form>

    <!--Blue Dialog-->
    <div title="Warrior Name - Blue" id="blue_form" class="blue_dialog">
        <form>
            <p>
                <label>Name:</label>
                    <input id="name" type="text">
            </p>
        </form>
        <table>

        <table>
    </div>

-------------------------------JSコード---------------------- ------:

<script>
    $(function() {
        $("button").button();
        $(".blue_img").click(function() {
            var blue_type = $(this).attr("title").trim();
            $.ajax({
                url: "get_attributes.php",
                type: "post",
                datatype: "json",
                data: {wtype: blue_type },
                success: function(data) {
                    var toAppend = '';
                    if(typeof data === "object"){
                        for(var i=0;i<data.length;i++){
                            var attributes = data[i];
                            toAppend += "<tr><td>"+data[i]['health']+"</td></tr>";
                            toAppend += "<tr><td>"+data[i]['attack']+"</td></tr>";
                            toAppend += "<tr><td>"+data[i]['defense']+"</td></tr>";
                            toAppend += "<tr><td>"+data[i]['speed']+"</td></tr>";
                            toAppend += "<tr><td>"+data[i]['evade']+"</td></tr>";
                        }
                        $("#blue_form table").append(toAppend);
                    }
                }
            });
            $("#blue_form #name").val($(this).attr("alt").trim());
            $("#blue_form").dialog({
                    width:250,
                    resizable:false,
                    modal:true,
                    buttons: {
                        "Done": function() {
                            $("#blue_name").val($("#blue_form #name").val().trim());
                            $("#blue_type").val(blue_type);
                            $("#blue_form").hide(400);
                            $(this).dialog("close");
                        }
                    }
            });
        });
    });
</script>

#blue_form へのデータ出力のテーブルを期待していますが、取得できませんでした。しかし、私の他の機能はうまく機能します。しかし、javascript コンソールを見ると、メソッド post が識別されます

Answer 1

最初に理解しておく必要があるのは、get の代わりに post メソッドを使用しても効果がないということです。Post メソッドは比較的遅く、最初にデータよりもヘッダーを送信します。

このコードをjquery ajaxブロックで使用します

<script>
    $(function() {
        $("button").button();
        $(".blue_img").click(function() {
            var blue_type = $(this).attr("title").trim();
            $.ajax({
                url: "get_attributes.php",
                type: "post",
                datatype: "json",
                data: {wtype: blue_type },
                success: function(data) {
                    var toAppend = '';
                    var newdata=$.parseJSON(data);//first decode json and get array

                            toAppend += "<tr><td>"+newdata['health']+"</td></tr>";
                            toAppend += "<tr><td>"+newdata['attack']+"</td></tr>";
                            toAppend += "<tr><td>"+newdata['defense']+"</td></tr>";
                            toAppend += "<tr><td>"+newdata['speed']+"</td></tr>";
                            toAppend += "<tr><td>"+newdata['evade']+"</td></tr>";

                        $("#blue_form table").append(toAppend);
                    }
                }
            });
            $("#blue_form #name").val($(this).attr("alt").trim());
            $("#blue_form").dialog({
                    width:250,
                    resizable:false,
                    modal:true,
                    buttons: {
                        "Done": function() {
                            $("#blue_name").val($("#blue_form #name").val().trim());
                            $("#blue_type").val(blue_type);
                            $("#blue_form").hide(400);
                            $(this).dialog("close");
                        }
                    }
            });
        });
    });
</script>

このコードは完全に機能します

//jsonencode の出力はオブジェクトではなく、エンコードされた文字列です

Answer 2

あなたのコードから、ループが必要な理由がわかりません。次のようなことができます

success: function(data) {
    var toAppend = '';
    if(typeof data === "object") {
        toAppend += "<tr><td>"+data['health']+"</td></tr>";
        toAppend += "<tr><td>"+data['attack']+"</td></tr>";
        toAppend += "<tr><td>"+data['defense']+"</td></tr>";
        toAppend += "<tr><td>"+data['speed']+"</td></tr>";
        toAppend += "<tr><td>"+data['evade']+"</td></tr>";
        $("#blue_form table").append(toAppend);
    }
}

Answer 3

header("Content-Type: application/json");

これをphpに追加しました。ご協力いただきありがとうございます。本当にありがとうございます。tsk 1行のコード cud fix