HTML+JS发送表单数据到PHP使用POST - HTML+JS send form data to PHP using POST

我真的是新的所有HTML/JS/PHP，但我想创建一个简单的登录页面连接到数据库。用户提供用户名和密码，点击sumbit按钮后，网页将切换到用户信息页面。

到目前为止，我已经设置了我的数据，我的PHP函数工作正常(我用POSTMAN测试了它)然而，我不能得到我的HTML/JS工作。我一直在使用xmlhttp方法与PHP对话，但失败了

这是我的html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>login page</title>
    <style type ="text/css">
    h3{
        text-align:center;
        margin-top:20px;
    }
    p{
        text-align:center;
    }
    div{
        text-align:center;
    }
    </style>
</head>
<body>
    <h3>Login Page</h3>
    <form name="login">
        <p>username: <input id="user" type="text" name="username" /></p>
        <p>password: <input id="pass" type="password" name="password" /></p>
        <p><input type="button" value ="Submit" onclick="showUser(document.getElementById('user').value, document.getElementById('pass').value)" /></p>
    </form>
    <br><br>
    <div id="Info"><b>Student Infomation Table</b></div>

    <script type="text/javascript">
        function showUser(user, pass) {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                     document.getElementById("Info").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("POST","login.php",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
            xmlhttp.send("username="+user+"&password="+pass);
        }
    </script>
</body>
</html>

'这里是PHP

<?php
/*
 * Checks the login 
 */

include_once '/include/post_check.php';
// change header
header('Content-Type: application/json');
//check for post
if (checkPOST("username") && checkPOST("password")) {
    $user_pass = $_POST['password'];
    $user_name = $_POST['username'];
    if ($user_pass == "" || $user_name == "") {
        $temp = array("result" => "false", "reason" => "empty fields");
        echo (json_encode($temp));
        die();
    }
} else {
    $temp = array("result" => "false", "reason" => "not enough fields");
    echo (json_encode($temp));
    die();
}
// connect to MySQL
$con = mysqli_connect("localhost", "root", "xxx", "xxx");
// Check connection
if (mysqli_connect_errno()) {
    // Print out reason
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    die();
}
if($user_name == "xxx" && $user_pass =="xxx"){
    // write query (teacher's account)
    $query = "SELECT *
    FROM STUDENT";
}

$result = mysqli_query($con, $query);
echo "<table border='2'>
<tr>
<th>ID</th>
<th>Username</th>
<th>Password</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
  echo "<td>" . $row['username'] . "</td>";
  echo "<td>" . $row['password'] . "</td>";
  echo "</tr>";
}
echo "</table>";

mysqli_close($con);
?>

系缆柱()函数

<?php
function checkPOST($field){
    return (isset($_POST[$field]));
}
?>

是一个简单的错误。您错过了表单中的方法标签和ACTION标签…如果表单中没有method和action标签，就不能提交表单数据。所以像这样改变form标签

& lt;表单名称="login"方法="post"动作="输入要提交的PHP ">

在html中使用

名称:

$ name = $ _POST['名字'],

mysql_connect(your server);
mysql_select_db (your database);
mysql_query (insert into your database);