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

Question

I am trying to change the content of my php web page using ajax as below the index.php page has input filed that call a function to executed on the button click but my problem is that the page is reload it 我正在尝试使用ajax来更改我的php网页的内容，如下index.php页面已输入文件，该文件调用了在按钮单击时执行的函数，但是我的问题是该页面正在重新加载

so i want to know what I am doing wrong?? 所以我想知道我在做什么错？

Note that i am using the post requests to keep my data secure as w3schools.com recommended 请注意，我按照w3schools.com的建议使用发帖请求来确保我的数据安全

inexd.php file code below 下面的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>

The data.php file code below 下面的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! 使用<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>

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) . 然后在您的data.php中，您不需要任何html，只需要处理ajax发布请求（也不需要Session）接收到的数据。 In the xmlhttp.responseText you are receiving your answer from the server when the request is finished. 在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

?>

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

问题描述

1 个解决方案

解决方案1
1 2016-08-13 13:31:10

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

问题描述

1 个解决方案

解决方案1 1 2016-08-13 13:31:10

解决方案1
1 2016-08-13 13:31:10