Question

在尝试使用PHP，JS和ajax创建注册页面时，我遇到了错误，这是由于我编写的JS代码所致，原因是因为没有ajax和JS代码，PHP代码才有效完美。

这是我采取的步骤，我首先编写了HTML代码，这就是HTML代码。它称为add.html

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title id="title">jQuery Insert</title>
        <link rel='stylesheet' href='css/styles.css'>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <section id="ball">
            <form action="" method="post" id="theForm">
                <p><input type="text" id="f_name" name="f_name" placeholder="firstname" value="></p>
                <p><input type="text" id="l_name" name="l_name" placeholder="lastname" value="></p>
        </section>
        <p><input type="submit" id="submit" value="Submit" name="submit">
        </p>
        <p id="success"></p>
        <p id="error"></p>
        <p id="statusT"></p>
        <p id="stat"></p>
        <!--<script src="js/insert.js"></script>-->
        <script src="js/ajax.js"></script>
        <script src="js/add.js"></script>
    </body>
</html>

然后我创建ajax.js脚本

function getAjaxRequest(){
    var ajax = null;
    if(window.XMLHttpRequest){
        ajax = new XMLHttpRequest();
    }
    if(window.ActiveXObject){// Older IE
        ajax = new ActiveXObject("MSXML.XMLHTTP.3.0");
    }
    return ajax;
}

此后，我创建JS脚本

var f_name = document.getElementById("f_name").value;
var l_name = document.getElementById("l_name").value;
var submit = document.getElementById("submit");

var ajax = getAjaxRequest();

ajax.onreadystatechange = function(){
    if(this.readyState == 4){
        if((this.status == 200 || this.status < 300) && this.status == 304){
            document.getElementById("success").innerHTML = this.responseText;
            form.submit.disabled = true;
        }else{
            document.getElementById("error").innerHTML = this.responseText;
            document.getElementById("statusT").innerHTML = this.statusText;
            document.getElementById("stat").innerHTML = this.status;
        }//End of status

    }//End of readyState

}//End of ajax.onreadystatechange
ajax.open("POST", "/../../jquery/ajax/addStudent.php");

   var data =new FormData();
   data.append('f_name', f_name);
   data.append('l_name', l_name);

submit.addEventListener('click', function(){
   ajax.send(data);

}, false);//end of addEventListener

最后，这是PHP脚本

<?php
// Set the database access information as constants:
DEFINE('DB_USER', 'willpower');
DEFINE('DB_PASSWORD', 'arseblog');
DEFINE('DB_HOST', 'localhost');
DEFINE('DB_NAME', 'school');
// Make the connection:
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
// Set the character set:
mysqli_set_charset($dbc, 'utf8');

if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $sqlistu = "INSERT INTO students (`first_name`, `last_name`) VALUES
        (?,?)";

        $queryistu = $dbc->prepare($sqlistu);
        //echo $db->error;
        $queryistu->bind_param("ss", $f_name, $l_name);
        $queryistu->execute(); 

        $IDnum = mysqli_insert_id($dbc);

        // Free result set
        $queryistu->close();
        ///////////////////////////

        if (isset($IDnum)):
            echo 'success' . '<br>';
            echo $IDnum;
        endif;
}

在XHR和RESPONSE下检查firefox开发人员版浏览器的网络时，它显示设置为显示的成功消息

document.getElementById（“成功”）

设置为

responseText

ajax甚至在填写表格之前

Answer 1

submit.addEventListener('click', function(){
   ajax.send(data);

}, false);//end of addEventListener

您有一个单击submit时会调用的函数，该函数通过XMLHttpRequest发送数据。

但是，您收集该功能之外的所有数据。

该代码不会一直等到单击该按钮后，数据才会立即收集（即在用户键入数据之前）。

Answer 2

尝试一下：

var myForm = document.getElementById("theForm");

var ajax = getAjaxRequest();

ajax.onreadystatechange = function(){
    if(this.readyState == 4){
        if((this.status == 200 || this.status < 300) && this.status == 304){
            document.getElementById("success").innerHTML = this.responseText;
            form.submit.disabled = true;
        }else{
            document.getElementById("error").innerHTML = this.responseText;
            document.getElementById("statusT").innerHTML = this.statusText;
            document.getElementById("stat").innerHTML = this.status;
        }//End of status

    }//End of readyState

}//End of ajax.onreadystatechange
ajax.open("POST", "/../../jquery/ajax/addStudent.php");



myForm.addEventListener('submit', function(e){
   e = e || window.event;
   e.preventDefault();
   var f_name = document.getElementById("f_name").value, l_name = document.getElementById("l_name").value, data =new FormData();
   data.append('f_name', f_name);
   data.append('l_name', l_name);
   ajax.send(data);

}, false);

ajax，javascript，php无法完美运行

2 个答案: