【发布时间】：2020-01-10 15:06:50
【问题描述】：
我正在尝试使用 AJAX 提交表单。如果我使用提交按钮，它会保存它，但如果我使用 AJAX，则不会保存表单。
这行得通（表单被保存到数据库中）
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" />
<meta charset="utf-8" />
<title>HotSpot</title>
</head>
<body>
<form accept-charset="utf-8" name="mail" action="http://10.30.20.30:8080/Site/anti-xss.php" method="post" id="mail">
<h1>Hotspot</h1>
<h2>To gain internet access, enter your email.</h2>
<br />
<input type="text" id="email" name="email" autofocus="autofocus" />
<br />
<input type="submit" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</body>
</html>
这不起作用（数据没有保存到数据库中），但是 console.log 写道：
启动 AJAX！
成功了！
你的电子邮件是 something@some.one。
XHR2 4
XHR2 200
AJAX 发送！
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" />
<meta charset="utf-8" />
<title>HotSpot</title>
</head>
<body>
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<h1>Hotspot</h1>
<h2>To gain internet access, enter your email.</h2>
<br />
<input type="text" id="email" name="email" autofocus="autofocus" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
<script>
document.getElementById("submit_ok").addEventListener("click", sendAjax);
async function sendAjax() {
console.log("Start AJAX!");
let ax2 = await Ajax2 ("POST", "http://10.30.20.30:8080/Site/anti-xss.php")
console.log("AJAX sent!");
}
function Ajax2 (method, url){
return new Promise (function (resolve, reject){
let xhr2 = new XMLHttpRequest();
xhr2.open('POST', 'http://10.30.20.30:8080/Site/anti-xss.php', true);
xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr2.onload = function(){
if(this.status >= 200 && this.status < 300){
resolve(xhr2.response);
console.log("Success!");
console.log("You'r email is " + useremail + ".");
console.log("XHR2 " + xhr2.readyState);
console.log("XHR2 " + xhr2.status);
}else{
reject({
status: this.status,
statusText: xhr2.statusText
});
}
};
xhr2.onerror = function (){
reject({
status: this.status,
statusText: this.statusText
});
};
let useremail = document.getElementById("email").value;
xhr2.send("Email="+encodeURIComponent(useremail));
});
}
</script>
</body>
</html>
PHP - 连接.php
<?php
header('Access-Control-Allow-Origin: *');
$host = "localhost";
$userName = "root";
$password = "";
$dbName = "baza";
// Create database connection
$DB = new mysqli ($host, $userName, $password, $dbName);
//$conn = new mysqli($host, $userName, $password, $dbName);
// Check connection
if ($DB->connect_error) {
die("Connection failed: " . $DB->connect_error);
}
?>
PHP - 反xss.php
<?php
require ('connect.php');
$clean_email = "";
$cleaner_email = "";
if(isset($_POST['email']) && !empty($_POST['email'])){
//sanitize with filter
$clean_email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
//sanitize with test_input
$cleaner_email = test_input($clean_email);
//validate with filter
if (filter_var($cleaner_email,FILTER_VALIDATE_EMAIL)){
// email is valid and ready for use
echo "Email is valid";
//Email is a column in the DB
$stmt = $DB->prepare("INSERT INTO naslovi (Email) VALUES (?)");
$stmt->bind_param("s", $cleaner_email);
$stmt->execute();
$stmt->close();
} else {
// email is invalid and should be rejected
echo "Invalid email, try again";
}
} else {
echo "Please enter an email";
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$DB->close();
?>
感谢您的帮助。
【问题讨论】：
-
"this does not work"是什么意思？表单数据没有放在您的数据库中吗？ -
是的，这就是我的意思。如果您查看第一个示例，数据将保存到数据库中。在 2cnd 示例中，它没有保存到数据库中。
-
代码看起来不错。检查你的 anti-xss.php 很可能问题出在某个地方
-
但 php 适用于正常提交（它正在保存到数据库中）。我也会上传php...
-
@DrDoom 谢谢。不需要:) 最好的
标签： javascript php html ajax