ajax、javascript、php不能完美工作_Javascript_Php_Ajax

ajax、javascript、php不能完美工作

javascript php ajax

ajax、javascript、php不能完美工作,javascript,php,ajax,Javascript,Php,Ajax,在尝试使用PHP、JS和ajax创建注册页面时，我遇到了一些错误，这是由于我编写的JS代码造成的，之所以这么说是因为没有ajax和JS代码，PHP代码就可以完美地工作这是我采取的步骤，我首先编写了HTML代码，这是HTML代码。它被称为add.html <!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <title id="t

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

在此之后，我创建了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

var f_name=document.getElementById（“f_name”）.value；
var l_name=document.getElementById（“l_name”）.value；
var submit=document.getElementById（“提交”）；
var ajax=getAjaxRequest（）；
ajax.onreadystatechange=函数（）{
if（this.readyState==4）{
if（（this.status==200 | | this.status<300）和&this.status==304）{
document.getElementById（“success”）.innerHTML=this.responseText；
form.submit.disabled=true；
}否则{
document.getElementById（“error”）.innerHTML=this.responseText；
document.getElementById（“status”）.innerHTML=this.statusText；
document.getElementById（“stat”）.innerHTML=this.status；
}//结束状态
}//再结晶结束
}//ajax.onreadystatechange结束
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（））{
发送（数据）；
}，假）//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;
}


单击submit
时调用一个函数，该函数通过XMLHttpRequest发送数据
但是，您可以收集该函数之外的所有数据
该代码不会等待按钮被单击，因此数据会立即收集（即在用户键入数据之前）。
尝试以下操作：
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);

var myForm=document.getElementById（“theForm”）；
var ajax=getAjaxRequest（）；
ajax.onreadystatechange=函数（）{
if（this.readyState==4）{
if（（this.status==200 | | this.status<300）和&this.status==304）{
document.getElementById（“success”）.innerHTML=this.responseText；
form.submit.disabled=true；
}否则{
document.getElementById（“error”）.innerHTML=this.responseText；
document.getElementById（“status”）.innerHTML=this.statusText；
document.getElementById（“stat”）.innerHTML=this.status；
}//结束状态
}//再结晶结束
}//ajax.onreadystatechange结束
open（“POST”，“/../../jquery/ajax/addStudent.php”）；
myForm.addEventListener（'submit'，函数（e）{
e=e | | window.event；
e、 预防默认值（）；
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）；
发送（数据）；
}，假）；
当整个代码都在addEventListener中时，它不起作用。为什么OP要尝试此操作？好的答案总是会有一个解释，说明做了什么以及为什么这样做，不仅是为了OP，而且是为了未来的访客，这样他们可能会发现这个问题并阅读你的答案。@RiggsFolly我完全同意你的观点，但是，我只是按原样发布代码的原因，没有解释，是不是在我决定接电话的时候，我正在用手机，这看起来很奇怪？我说到我，你真的无法想象用手机发帖有多痛苦，有时我写了一些字，突然它们就被抹掉了！我甚至不知道这是为什么，也不知道是怎么发生的，有时我试图删除一封信，但它不起作用。这就是为什么我没有解释就回答了。我真的很感激你的意见，如果这真的很重要，我可以很高兴地删除答案。@this。我试试看it@jaquarpow我在这里为您提供任何进一步的解释。@当我检查XHR参数时，它现在显示firstname和lastname，但它仍然不将其提交到数据库，而仅使用PHP和HTML提交到数据库。为了全面学习AJAX、JS和PHP，我还需要做些什么？
submit.addEventListener('click', function(){
   ajax.send(data);

}, false);//end of addEventListener

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);