使用ajax更新PHP页面，使用post请求重新加载页面

update php page using ajax using post requests reload the page?

本文关键字：使用 加载 新加载 请求 更新 ajax PHP 页面 post      更新时间：2023-09-26

我试图改变我的php网页使用ajax的内容如下index。php页面有一个输入文件调用一个函数来执行按钮点击但我的问题是页面重载它

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

请注意，我使用post请求来保持我的数据安全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
?>

使用<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 post请求的数据(会话也不需要)。在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
?>
相关文章：