javascript - 尝试从文本框中获取数据并将其插入数据库

Question

我有一个用于输入信息和注册帐户的表单。信息在网站上输入，当按下“注册”按钮时，外部 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();

Answer 1

我的建议是使用 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.
    }
});