Question

我正在尝试根据用户的输入（日期选择）生成一些发票。这是这样的：

invoice.php文件将允许用户从表单中选择日期，并根据该选择更新同一页面上的发票内容（如金额，客户等）通过Ajax。
ajaxInvoice.php将生成一个MySQL查询，最后根据日期选择和商家（唯一行）创建一个包含相应表格行的数组。

invoice.php

...

<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
    var ajaxRequest;

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('field_1');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var date = document.getElementById('date').value;
    var merchant = document.getElementById('merchant').value;
    var queryString = "?date=" + date + "&merchant=" + merchant;
    ajaxRequest.open("GET", "ajaxInvoice.php" + queryString, true);
    ajaxRequest.send(null); 
}

//-->
</script>

...

<form name="invoiceDate">
<input type="hidden" id="merchant" value="<?php echo $merchant; ?>" />
Date: <select id="date">
<option>2013-07-23</option>
<option>2013-07-25</option>
</select>
<input type="button" onclick="ajaxFunction()" value="Select Date" />
</form>

...

<div id="field_1">FIELD 1</div>

...

<div id="field_2">FIELD 2</div>

...

<div id="field_3">FIELD 3</div>

...

ajaxInvoice.php

include_once('includes/db.php');

$merchant = $_GET['merchant'];
$date = $_GET['date'];

$merchant = mysql_real_escape_string($merchant);
$date = mysql_real_escape_string($date);

$query = "SELECT * FROM settlements WHERE datePayment = '$date' AND merchant = '$merchant'";
$result = mysql_query($query) or die(mysql_error());

$array = array();

while($row = mysql_fetch_assoc($result)) {
    $array[] = $row;
}

我想知道我是否可以通过这种方式访问该阵列：

echo $array[0]['fieldName'];

并根据不同的行字段更新页面上的选定元素。不确定是否应使用getElementById或getElementByName。

我的问题是如何在脚本部分内以及在页面的其余部分内实际访问php数组，这样我就可以在用户选择之后使用从DB查询获得的相应数据更新各种div元素。表格中的日期。

事实上，如果只有一个div必须更新，代码工作正常，但我不知道如何扩展逻辑以更新多个div。

非常感谢有关语法或代码逻辑的任何帮助或提示。

非常感谢你！

Answer 1

我通常使用JSON：

服务器上的PHP：echo json_encode($array)

客户端上的JavaScript：var response = JSON.parse(ajaxRequest.responseText)

实现：

invoice.php

...
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var response = JSON.parse(ajaxRequest.responseText);

        // Now you can use:
        response[0]['fieldName'];

        // Like this
        var ajaxDisplay = document.getElementById('field_1');
        ajaxDisplay.innerHTML = response[0]['field_1'];                
    }
}
...

ajaxInvoice.php

...
$array = array();

while($row = mysql_fetch_assoc($result)) {
    $array[] = $row;
}

// Encode to JSON
echo json_encode($array);

从PHP数组结果通过Ajax更新多个元素

1 个答案: