如何解决我的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控制台它标识的方法后

+0

什么是Firebug或Chrome的JavaScript调试器告诉你? – rwilliams

+0

它获得后的价值和JSON我认为问题是从显示 –

+0

尝试把'console.log(数据);'后'var toAppend =';;并期待控制台 –

从你的代码,我不知道为什么你需要一个循环,你可能只是做类似

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); 
    } 
} 
+0

得到相同的值.. :( –

+0

@BrainedWashed你可以发布json字符串,你从服务器回来吗? – Erik

+0

我也不需要循环谢谢! –

你需要站在第一件事是没有使用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