我有一个用于输入信息和注册帐户的表单。信息在网站上输入,当按下“注册”按钮时,外部 JavaScript 方法会对其进行验证,然后使用 ajax 调用 PHP 方法,该方法应从文本框中获取信息并将其输入数据库。我似乎无法让 PHP 获取信息。
<?php
$mysqli = new mysqli('localhost:8080', 'root', null, 'salmonhouse');
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$sql = "INSERT INTO clients (name, surname, email, address, password)
VALUES (?,?,?,?,?)";
$name = $_POST['name'];
$surname = $_POST['surname'];
$email= $_POST['email'];
$address= $_POST['Address'];
$pass= $_POST['Password'];
$stmt = $mysqli->prepare($sql);
$stmt->bind_param("sssss", $name, $surname, $email, $address, $pass);
$stmt->execute();
?>
HTML 文本框
<form class="quote">
<div class = inliner>
<label>Name</label>
<input id="name" type="text" placeholder="Name">
</div>
<div class = inliner>
<label>Surname</label>
<input id="surname" type="text" placeholder="Surname">
</div>
<div>
<label>Email</label><br>
<input id="email" type="email" placeholder="Email Address"><br>
</div>
<div>
<label>Address</label><br>
<input id="Address" type="email" placeholder="Home Address"><br>
</div>
<div class = inliner>
<label>Password</label>
<input id="Password" type="text" placeholder="Password">
</div>
<div class = inliner>
<label>Verify Password</label>
<input id="vPassword" type="text" placeholder="Password">
</div>
<br><button class="button_1" type="button" onclick="Validate()">Register</button>
</form>
从html页面调用javascript文件
<script type= "text/javascript">
var name = document.getElementById("name").value;
var surname =document.getElementById("surname").value;
var email =document.getElementById("email").value;
var pass=document.getElementById("Password").value;
var passV =document.getElementById("vPassword").value;
var address=document.getElementById("Address").value;
</script>
<script type= "text/javascript" src="asset/js/my_javascript.js"></script>
实际的 JavaScript 文件
/* eslint-env browser */
/*jslint devel: true */
/* eslint-disable */
function Validate(){
name = document.getElementById("name").value;
surname =document.getElementById("surname").value;
email =document.getElementById("email").value;
pass=document.getElementById("Password").value;
passV =document.getElementById("vPassword").value;
var error = "";
document.getElementById("name").style.borderColor = "white";
document.getElementById("surname").style.borderColor = "white";
document.getElementById("email").style.borderColor = "white";
document.getElementById("Password").style.borderColor = "white";
document.getElementById("vPassword").style.borderColor = "white";
var count= 0;
if(name.length == 0){
document.getElementById("name").style.borderColor = "red";
count =1;
error = error + "Name cannot be empty\n"
}
if(surname.length == 0 ){
document.getElementById("surname").style.borderColor = "red";
count =1;
error = error + "Surname cannot be empty\n"
}
if(email.length == 0 ){
document.getElementById("email").style.borderColor = "red";
count =1;
error = error + "Email cannot be empty\n"
}
if(!(email.includes("@"))){
document.getElementById("email").style.borderColor = "red";
count =1;
error = error + "Email needs to contain an @ symbol\n"
}
if(!(email.includes("."))){
document.getElementById("email").style.borderColor = "red";
count =1;
error = error + "Email needs to comtain a .com or similar\n"
}
if(pass!==passV){
document.getElementById("Password").style.borderColor = "red";
document.getElementById("vPassword").style.borderColor = "red";
count =1;
error = error + "Passwords do not match\n"
}
if(!(pass.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%&*()])[0-9a-zA-Z!@#$%&*()]{8,}$/))){
document.getElementById("Password").style.borderColor = "red";
document.getElementById("vPassword").style.borderColor = "red";
count =1;
error = error + "Password must be atleat 8 long and contain a LowerCase, UpperCase, Number and a symbol."
}
if(false){
alert("Please correct the following errors highlighted in red\n"+error);
}
else{
alert("Name: " + name + "\nSurname: "+ surname + "\nEmail: "+ email+"\nPassword: "+pass+"\n Succesful Registration");
xmlhttp = new XMLHttpRequest();
var url = "asset/php/inserting.php";
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
}
/* eslint-enable */
此 PHP 文件是一个单独的文件,仅包含此代码。我已经测试过,如果我手动设置变量而不是尝试检索它们,数据将成功插入到数据库中。所以根据我的测试,这只是检索不起作用。我也尝试过 $_REQUEST['name']
这是 ajax/xmlhttprequest 代码。
xmlhttp = new XMLHttpRequest();
var url = "asset/php/inserting.php";
xmlhttp.open("POST",url,true);
xmlhttp.send();
最佳答案
我的建议是使用 jQuery 库而不是 XMLHttpRequest。您需要包含在 <head>
中HTML 部分 <script>
标签从某些 CDN(内容分发网络)加载 jQuery 库。另添加id="f"
给您<form>
标签。那么您的 Ajax 调用可以像这样简单:
$.ajax({
type: "POST",
url: 'asset/php/inserting.php',
data: $('#f').serialize(), // serializes the form's elements.
success: function(msg)
{
alert(msg); // show response from the php script.
}
});
关于javascript - 尝试从文本框中获取数据并将其插入数据库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57347246/