简体   繁体   English

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

[英]HTML+JS send form data to PHP using POST

I'm really new to all HTML/JS/PHP but I want to create a simple login page thats connected to a database. 我真的是所有HTML / JS / PHP的新手,但是我想创建一个连接到数据库的简单登录页面。 User provide username&password, once sumbit button is clicked the webpage will change to user's information page. 用户提供用户名和密码,单击“ sumbit”按钮,网页将切换到用户的信息页面。

So far, I have my data set up and my PHP function is working fine (I tested it with POSTMAN) , however, I cannot get my HTML/JS working. 到目前为止,我有我的数据设置和我的PHP函数工作正常(我与邮差测试过),但是,我不能让我的HTML / JS工作。 I've been using the xmlhttp method to talk with PHP but failed 我一直在使用xmlhttp方法与PHP通讯,但是失败了

So, here is my html code 所以,这是我的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>

` Here is the PHP `这是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() function checkPOST()函数

<?php

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

?>

the ERROR is simple one. 错误很简单。 You missed the method tag and ACTION tag in your form...without method and action tag inside FORM, you cant submit your form data. 您错过了表单中的方法标签和ACTION标签...在FORM内没有方法和操作标签的情况下,您无法提交表单数据。 so change form tag like this, 所以像这样更改表单标签,

< form name="login" method="post" action="enter php you want to submit"> <form name =“ login” method =“ post” action =“输入要提交的php”>

use this in html 在html中使用它

Name: 名称:

use this in php 在PHP中使用它

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM