ajax、javascript、php不能很好地工作
ajax、javascript、php不能很好地工作
提问于 2018-08-19 05:37:04
在尝试使用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
甚至在填写表单之前
回答 2
Stack Overflow用户
发布于 2018-08-19 05:39:52
submit.addEventListener('click'，function(){ ajax.send(data)；}，false)；// addEventListener结束
您有一个函数，当单击submit时调用该函数，该函数通过XMLHttpRequest发送数据。
但是，您可以对该函数之外的所有数据进行。
代码不会直到按钮被点击，所以数据会被立即收集(即在用户输入之前)。
Stack Overflow用户
发布于 2018-08-19 05:55:08
试试这个：
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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51912744
复制相关文章
相似问题