JavaScript Ajax для PHP, а затем обратно в Javascript

Question

OK Итак, у меня есть 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; 
} 

Аякса принимает СКП, который был напечатан в форме и использует ее, чтобы получить описание и цену для этого конкретного пункта. Мне нужно знать, как вернуть эту информацию в вызов Java Script для создания строк в таблице. Элементы из PHP должны вернуться в сценарий Java в следующих строках: (вытащил из приведенного выше сценария)

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

Мой РНР короткий и простой, и выглядит следующим образом:

$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']; 
} 

Это необходимо сделать, не обновляя страницу. Я googled, как это сделать, но не смог получить результат, который соответствовал моей ситуации.

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

• Кажется, мало кто из нас должен изюминку, но вы получите тэк, что вы должны делать, ха-ха.

Answer 2

Я предлагаю вам вернуть SQL результат как JSON строки в коде 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); 

В коде 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

UNTESTED, но ваш код должен выглядеть следующим образом:

$.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, что и хорошо.