2012-09-15 34 views
0

--------------------------- 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 =';;並期待控制檯 –

回答

1

從你的代碼,我不知道爲什麼你需要一個循環,你可能只是做類似

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

我也不需要循環謝謝! –

1

你需要站在第一件事是沒有使用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的輸出是不是一個對象是一個編碼的字符串

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

我只是說這我的PHP。感謝大家的幫助,非常感謝。 tsk只是一行代碼cud fix