Question

我正在尝试使用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

?>

Answer 1

With the <input type="submit" value="Search"> your sending the form the "old" way to the server not with 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>

Then in your data.php you do not need any html you just need to process the the data that you received by the ajax post request(Session is also not needed for that) . In the xmlhttp.responseText you are receiving your answer from the server when the request is finished.

<?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

?>

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

1 个答案: