JavaScript Ajax到PHP，然後返回到Javascript

Question

好所以我有一個java腳本，當輸入字段停止輸入操作時觸發ajax調用。

//setup before functions 
var field = document.getElementById("UPC"); 
var table=document.getElementById("ScannedItems"); 
var typingTimer; //timer identifier 
var doneTypingInterval = 1000; //time in ms, 1 seconds 

//on keyup, start the countdown 
$('#UPC').keyup(function(){ 
    clearTimeout(typingTimer); 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 
}); 

//on keydown, clear the countdown 
$('#UPC').keydown(function(){ 
    clearTimeout(typingTimer); 
}); 


function doneTyping() { 
//user is "finished typing," do something 
var upc=document.getElementById("UPC").value; 
document.getElementById("noScan").className="hidden"; 
document.getElementById("checkout").className=""; 
document.getElementById("void").className=""; 

var dataString = 'upc='+ upc; 
//alert (dataString);return false; 
$.ajax({ 
    type: "POST", 
    url: "assets/PagePHP/pos/scan.php", 
    data: dataString, 
    success: function() { 
     var row=table.insertRow(-1); 
     var cell1=row.insertCell(0); 
     var cell2=row.insertCell(1); 
     var cell3=row.insertCell(2); 
     var cell4=row.insertCell(3); 
     var cell5=row.insertCell(4); 
     var cell6=row.insertCell(5); 
     cell1.innerHTML =upc; 
     cell2.innerHTML ="Description"; 
     cell3.innerHTML ="PRICE"; 
     cell4.innerHTML ="QTY"; 
     cell5.innerHTML ="TOTAL"; 
     cell6.innerHTML ="ACTION"; 
     field.value =''; 
    } 
}); 
return false; 
} 

ajax將UPC輸入到表單中，並使用它獲取該特定項目的描述和價格。我需要知道如何將這些信息放回到Java Script調用中來創建表中的行。從PHP中的項目需要回到到下面的行Java腳本：（從上面的腳本拉）

cell1.innerHTML =upc; 
cell2.innerHTML ="Description"; 
cell3.innerHTML ="PRICE"; 
cell4.innerHTML ="QTY"; 

我的PHP是短期和簡單，看起來像這樣：

$result = mysqli_query($con,"SELECT * FROM inventory WHERE item_upc='$_POST[upc]'"); 

while($row = mysqli_fetch_array($result)) 
{ 
echo $row['item_upc']; 
echo $row['item_description']; 
echo $row['item_price']; 
} 

這一切都必須在不刷新頁面的情況下完成。我GOOGLE瞭如何做到這一點，但不能得到符合我的情況的結果。

Answer 1

我願意做你的AJAX查詢，讓你的PHP腳本返回一個JSON字符串與您的數據，您可以解碼和你的成功的功能處理：

<?php 
    header('Content-type: application/json'); 
    $con = ...; //establish_connection 
    $result = mysqli_query($con,"SELECT * FROM inventory WHERE item_upc='$_POST[upc]'"); 

    $json = array(); 
    $json['success'] = false; 

    while($row = mysqli_fetch_array($result)) 
    { 
     $json['success'] = true; 
     $json['item_upc'] = $row['item_upc']; 
     $json['item_description'] = $row['item_description']; 
     $json['item_price'] = $row['item_price']; 
    } 

    echo json_encode($json); 
?> 

併爲您的AJAX應用：

$.ajax({ 
    type: "POST", 
    url: "assets/PagePHP/pos/scan.php", 
    data: dataString, 
    success:function(data){ 
     if(data.success==true){ 
      // handle data array 
      var row=table.insertRow(-1); 
      var cell1=row.insertCell(0); 
      var cell2=row.insertCell(1); 
      var cell3=row.insertCell(2); 
      var cell4=row.insertCell(3); 
      var cell5=row.insertCell(4); 
      var cell6=row.insertCell(5); 
      cell1.innerHTML =upc; 
      cell2.innerHTML = data.item_description; 
      cell3.innerHTML = data.item_price; 
      cell4.innerHTML ="QTY"; // handle these as you like 
      cell5.innerHTML ="TOTAL"; 
      cell6.innerHTML ="ACTION"; 
      field.value =''; 
     } 
     else { 
      // nothing returned - error 
     } 
    } 
}); 

• 似乎我們幾個到了衝壓生產線，但你得到的，你需要做什麼哈哈的JIST。

Answer 2

我建議你在你的PHP代碼

$result = mysqli_query($con,"SELECT * FROM inventory WHERE item_upc='$_POST[upc]'"); 
$return_array = array(); 
while($row = mysqli_fetch_array($result)) 
{ 
    $return_array[] = $row; 
} 

echo json_encode($return_array); 

返回SQL結果爲JSON串在你的js代碼：

$.ajax({ 
    type: "POST", 
    url: "assets/PagePHP/pos/scan.php", 
    data: dataString, 
    success: function(data) { //add parameter to receive response 

     var result = $.parseJSON(data);//parse the return result 
             //to a native js an object 
     //result should be an array so you can iterate it to get information you need 

     var row=table.insertRow(-1); 
     var cell1=row.insertCell(0); 
     var cell2=row.insertCell(1); 
     var cell3=row.insertCell(2); 
     var cell4=row.insertCell(3); 
     var cell5=row.insertCell(4); 
     var cell6=row.insertCell(5); 
     cell1.innerHTML =upc; 
     cell2.innerHTML ="Description"; 
     cell3.innerHTML ="PRICE"; 
     cell4.innerHTML ="QTY"; 
     cell5.innerHTML ="TOTAL"; 
     cell6.innerHTML ="ACTION"; 
     field.value =''; 
    } 
}); 

Answer 3

未經測試，但你的代碼看起來應該是這樣的：

$.ajax({ 
    type: "POST", 
    url: "assets/PagePHP/pos/scan.php", 
    data: dataString, 
    dataType: 'json', 
    success: function(response) { 
     // Build out the rows 
     var rows = ''; 
     for(var i=0; i<response.items; i++) { 
      rows += '<tr>' + 
         '<td>' + response.item_upc + '</td>' + 
         '<td>' + response.item_description + '</td>' + 
         '<td>' + response.item_price + '</td>' + 
        '</tr>';    
     } 

     // Insert rows into table 
     $('#my-table').html(rows); 
    } 
}); 

PHP：

點

$response = array(); 
while($row = mysqli_fetch_array($result)) { 
    $response[] = array(
     'item_upc'   => $row['item_upc'] 
     'item_description' => $row['item_description'] 
     'item_price'  => $row['item_price']   
    ); 
} 

echo json_encode(array(
    'items' => $response 
)); 
die(); 

2建議：

• 您檢索信息的用戶類型，因此你應該使用GET而不是POST方法。
• 您已經在使用jQuery作爲AJAX，所以不妨將它用於DOM處理，這也是它擅長的。