HTML + JS使用POST将表单数据发送到PHP

时间:2014-05-05 02:42:03

标签: javascript php html

我是所有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);
?>

checkPOST()函数

<?php

function checkPOST($field){
    return (isset($_POST[$field]));
}

?>

2 个答案:

答案 0 :(得分:0)

ERROR很简单。您错过了表单中的方法标记和ACTION标记...在FORM中没有方法和操作标记,您无法提交表单数据。 所以改变这样的表格标签,

&LT; form name =“login”method =“post”action =“输入你要提交的php”&gt;

答案 1 :(得分:-1)

在html中使用它

名称:

在php中使用它

$ name = $ _ POST ['name'];

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