使用ajax将数据发布到PHP文件

Question

I'm posting data through an $.ajax call to a php file. When the ajax call is completed, I run another javascript function that does a $.getJSON on the php file.

In the php file is a variable that should have the value of the posted data from ajax, but it is empty.

function inputSummonerName() {
    inputName = prompt("summoners name");

    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: { n : inputName },
        complete: function() {
            getImageData();
        }
    });
}

function getImageData() {
    $.getJSON('ajax.php', function (json) {
        if(!json){
            console.log("empty");
        }
        else{
            $.each(json, function (index) {
                summonerProfileIconId = json[index].profileIconId;
                summonerName = json[index].name;
                summonerLevel = json[index].summonerLevel;
                $(".summonerName").text(summonerName);
                $(".summonerProfileIconId").attr("src", "http://ddragon.leagueoflegends.com/cdn/4.13.1/img/profileicon/" + summonerProfileIconId + ".png");
                $(".summonerLevel").text("Level" + summonerLevel);
            });
        }
    });
}

here is the php file ajax.php:

<?php
    $apikey = "...";
    if (isset($_POST["n"])) {
        $summonerName = $_POST["n"];
    }

    $data = json_decode(file_get_contents("https://euw.api.pvp.net/api/lol/euw/v1.4/summoner/by-name/" . $summonerName . "?api_key=" . $apikey ));

    echo json_encode($data);

    ...
?>

Answer 1

You are making two requests to the PHP file.

1. $.ajax - gets the data you want from the remote server and returns it.
2. $.getJSON - hits the remote server again (but with the name missing ) and returns that.

You are trying to get the data from 2, where it doesn't exist. Don't use getJSON . Just use the data in your first complete function. Better, use success so that you don't try using it in the event of a server error. Consider adding an explicit error handler too.

You should also write the PHP so it tells the browser it is sending JSON instead of HTML, and there is no point in decoding the JSON and then doing nothing but reencoding it.

such:

header("Content-Type: application/json");
echo file_get_contents("https://euw.api.pvp.net/api/lol/euw/v1.4/summoner/by-name/" . $summonerName . "?api_key=" . $apikey );

Then in the JS:

function inputSummonerName() {
    inputName = prompt("summoners name");
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
            n: inputName
        },
        success: function(a) {
            if (!a) console.log("empty"); else $.each(a, function(b) {
                summonerProfileIconId = a[b].profileIconId;
                summonerName = a[b].name;
                summonerLevel = a[b].summonerLevel;
                $(".summonerName").text(summonerName);
                $(".summonerProfileIconId").attr("src", "http://ddragon.leagueoflegends.com/cdn/4.13.1/img/profileicon/" + summonerProfileIconId + ".png");
                $(".summonerLevel").text("Level" + summonerLevel);
            });
        }
    });
}

Answer 2

You are calling the script twice by using $.ajax ánd $.getJSON (which is a wrapper for $.ajax). Solution:

function inputSummonerName()
{
    inputName = prompt("summoners name");

    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: { n : inputName},
        success: function(data, textStatus, jqXHR)
        {
            getImageData($.parseJSON(data));
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //handle your error!
        }
    });

}

function getImageData(data)
{
    $.each(data, function (index) 
    {
        summonerProfileIconId = data[index].profileIconId;
        summonerName = data[index].name;
        summonerLevel = data[index].summonerLevel;
        $(".summonerName").text(summonerName);
        $(".summonerProfileIconId").attr("src", "http://ddragon.leagueoflegends.com/cdn/4.13.1/img/profileicon/" + summonerProfileIconId + ".png");
        $(".summonerLevel").text("Level" + summonerLevel);
    });
}

I also changed complete to success / error, so that on an error the other functions won't get angry because of the non array value.

Answer 3

try putting the n in quotes it should be a key, not a variable. IE:

function inputSummonerName(){
inputName = prompt("summoners name");

$.ajax({
    type: 'POST',
    url: 'ajax.php',
    data: { 'n' : inputName},
    complete: function(){
        getImageData();
    }
});

PS: Also there is a short hand for jquery if you really want http://api.jquery.com/jQuery.post/