Reputation: 21
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);
...
?>
Upvotes: 1
Views: 279
Reputation: 944568
You are making two requests to the PHP file.
$.ajax
- gets the data you want from the remote server and returns it.$.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);
});
}
});
}
Upvotes: 2
Reputation: 1330
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.
Upvotes: 1
Reputation: 1
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/
Upvotes: -1