使用 ajax 更新 php 页面，使用 post 请求重新加载页面？答案

【问题标题】：update php page using ajax using post requests reload the page?使用 ajax 更新 php 页面，使用 post 请求重新加载页面？
【发布时间】：2016-12-20 07:02:48
【问题描述】：

我正在尝试使用 ajax 更改我的 php 网页的内容，如下所示 index.php 页面的输入字段调用了在按钮单击时执行的函数，但我的问题是页面正在重新加载它

所以我想知道我做错了什么？

请注意，正如 w3schools.com 推荐的那样，我正在使用发布请求来保护我的数据安全

inexd.php文件代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Site Title</title>

</head>

<body align="left">

<div>
    <h4 align="left">Balance Enquiry</h4>
</div>

<form>
     <div>
        <label>Account Number </label>
        <input id="AccNum" type="text" name="AccNumInput">
        <button type="button" onclick="SendForm()">Search</button>
      </div>
</form>

<script>
function SendForm()
{
    alert("Hello! SendForm start");
       var xmlhttp = new XMLHttpRequest();
       xmlhttp.onreadystatechange = function() 
   {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
            {

                document.getElementById("AccNum").innerHTML = xmlhttp.responseText;
            }
    };
        alert("Hello! going to send ajax");
        var x = xmlhttp.open("POST","AccData.php", true);
        xmlhttp.send(document.getElementById("AccNum").value);  // you want to pass the Value so u need the .value at the end!!!

        alert(document.getElementById("AccNum").value);
        alert("Hello! SendForm end");
}
</script>

</body>

</html>

data.php文件代码如下

<?php

alert("Hello! php start processing");

$AccountNumber = $_POST['AccNum'];

$conn = oci_connect('admin', 'admin', 'localhost/JDT', 'AL32UTF8');
if (!$conn) {
    $e = oci_error();
    trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR);
}

alert("Hello! connected to oracle");

$sqlstr = 'SELECT CUSTOMER_ID,CUST_NAME,PHONE1 FROM customers where CUSTOMER_ID=:AccNum';

$stid = oci_parse($conn, $sqlstr); // creates the statement

oci_bind_by_name($stid, ':AccNum', $AccountNumber); // binds the parameter

oci_execute($stid); // executes the query

echo $AccountNumber;
/**
 *  THIS WHILE LOOP CREATES ALL OF YOUR HTML (its no good solution to echo data out like this)
 */
while ($row = oci_fetch_array($stid, OCI_ASSOC + OCI_RETURN_NULLS)) {
    echo "<tr>";
    foreach ($row as $item) {
        echo "<td align=center>" . ($item !== null ? htmlentities($item, ENT_QUOTES) : "&nbsp;") . "</td>";
    }
    echo "</tr>\n";
}
echo "</table>\n";

oci_free_statement($stid); // releases the statement
oci_close($conn); // closes the conneciton

?>

【问题讨论】：

标签： javascript php ajax html oracle

【解决方案1】：

使用<input type="submit" value="Search">，您将表单以“旧”方式发送到服务器，而不是使用 Ajax！

<form>
     <div>
        <label>Account Number </label>
        <input id="AccNum" type="text" name="AccNuminput">
        <button type="button" onclick="sendForm()">Search</button>
      </div>
</form>
<script>
function sendForm(){
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //Execudted when finished and everything its Okay
                document.getElementById("AccNum").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("POST", "acc_data.php", true);
        xmlhttp.send("accNum="+document.getElementById("AccNum").value); // you want to pass the Value so u need the .value at the end!!!
    }


</script>

然后在您的 data.php 中，您不需要任何 html，您只需要处理您通过 ajax 发布请求收到的数据（也不需要会话）。在xmlhttp.responseText 中，当请求完成时，您将收到来自服务器的答复。

<?php

$accountNumber = $_POST['accNum'];// set a good variable name
$conn = oci_connect('admin', 'admin', 'localhost/JDT', 'AL32UTF8'); //setup connection
if (!$conn) {
    $e = oci_error();
    trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR); // throws an error on connection error
}
$sqlstr = 'SELECT CUSTOMER_ID,CUST_NAME,PHONE1 FROM customers where CUSTOMER_ID=:ACCNUM'; // sql stirng
$stid = oci_parse($conn, $sqlstr); // creates the statement
oci_bind_by_name($stid, ':ACCNUM', $accountNumber); // binds the parameter
oci_execute($stid); // executes the query


/**
 *  THIS WHILE LOOP CREATES ALL OF YOUR HTML (its no good solution to echo data out like this)
 */
while ($row = oci_fetch_array($stid, OCI_ASSOC + OCI_RETURN_NULLS)) {
    echo "<tr>";
    foreach ($row as $item) {
        echo "<td align=center>" . ($item !== null ? htmlentities($item, ENT_QUOTES) : "&nbsp;") . "</td>";
    }
    echo "</tr>\n";
}
echo "</table>\n";

oci_free_statement($stid); // releases the statement
oci_close($conn); // closes the conneciton

?>

【讨论】：

非常感谢您的帮助..这解释了很多我不清楚的想法...请您介意教我用什么更好的方法代替循环来创建 HTML 吗？
不客气，我认为最好的解决方案是创建一个 JSON 对象并将 json 对象返回到 html 页面，然后用 javascript 完成剩下的工作......但一步一步来......做不要试图同时学习所有技术，那真的很难。
好的，然后我会按照你说的一步一步来.. 最后一个认为数据没有从服务器返回，url 更改为localhost/test/?AccNumInput=1000，但结果不会加载，并且在 xmlhttp.send(" accNum="+document.getElementById("AccNum").value) 应该是 xmlhttp.send(document.getElementById("AccNum").value) 因为该值将与不应在 sql 语句中的字符串一起传递？
in `xmlhttp.open("POST", "acc_data.php", true);'将 acc_data.php 替换为您要发送表单的 php 页面的整个 url。
我正在使用 localhost 和同一目录中的文件通过这种方式传递它 //localhost/test/Acc_Data.php 和 F:\xampp\htdocs\test\Acc_Data。 php 无法工作，顺便说一句，当我按下按钮时，url 不会更改为 localhost/test/?AccNumInput=1000，当我在输入字段的焦点上按下输入键盘按钮时，它只会更改