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

这一切都必须在不刷新页面的情况下完成。我用谷歌搜索了如何做到这一点，但无法得到与我的情况相符的结果。

Answer 1

未经测试，但您的代码应如下所示：

 $.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方法。
你已经在为AJAX使用jQuery了，所以也可以将它用于DOM manupulation，这也是它擅长的。

Answer 2

我会执行您的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 3

我建议你在PHP代码中将SQL结果作为JSON字符串返回

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

JavaScript Ajax到PHP，然后回到Javascript

3 个答案: