如何解决我的jQuery的ajax功能其他功能的作品,但阿贾克斯没有
问题描述:
--------------------------- PHP代码--- ------------------------:如何解决我的jQuery的ajax功能其他功能的作品,但阿贾克斯没有
<?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);
?>
------------------ --------- HMTL代码---------------------------:
<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控制台它标识的方法后
答
从你的代码,我不知道为什么你需要一个循环,你可能只是做类似
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);
}
}
答
你需要站在第一件事是没有使用post方法的效果,而不是get.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的输出是不是一个对象是一个编码的字符串
答
header("Content-Type: application/json");
我只是说这我的PHP。感谢大家的帮助,非常感谢。 tsk只是一行代码cud fix
什么是Firebug或Chrome的JavaScript调试器告诉你? – rwilliams
它获得后的价值和JSON我认为问题是从显示 –
尝试把'console.log(数据);'后'var toAppend =';;并期待控制台 –