1

我正在尝试进行基本的 ajax 登录，但对于我的一生，我无法弄清楚为什么[object HTMLInputElement]当我执行 toString() 时uname 和 pword 变量会继续打印

你可以在这里看到一个工作示例

只需输入一些内容，然后单击登录。它将命中数据库，然后打印出用户名、密码，然后是服务器响应

   <script>

        function login() {

            var xmlhttp;
            var uname = "";
            var pword = "";
            var date;

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }

            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            uname = document.getElementById("username").toString();
            pword = document.getElementById("password").toString();
            date = new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();
            xmlhttp.open("GET", "login.php?uname=" + uname.toString() + "&pword=" + pword.toString() + "&date=" + date, true);
            xmlhttp.send();

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("response").innerHTML = uname.toString() + "<br/>" + pword.toString() + "<br/>" + date + "<br/>" + xmlhttp.responseText;
                }
            }

        }
    </script>

这是 HTML 代码

   <body>
      <center>
            <div style="align-content:center">
                <form>                
                    <br />
                    <br />
                    <br />
                    <br />
                    <h1 style="font-family:'Microsoft Yi Baiti'; font-size:40px">Ajax test Site</h1>
                    <br />       
                    <label>Username</label>
                    <br />
                    <input type="text" id="username" name="username" style="width:190px"/>
                    <br />
                    <label>Password</label>
                    <br />
                    <input type="password" id="password" name="password"style="width:190px"/>
                    <br />
                    <label id="tryAgainText" style="color:red; visibility:hidden">Username or Password incorrect</label>
                    <br />
                    <input onclick="login()" type="button" name="submit"  value="Login" style="width:216px; margin-left: 0px;"/>
                </form>
                <p id="response">This is the response field</p>
             </div>
       </center>
    </body>
4

3 回答 3

2

您正在选择 html 元素来代替其中存在的值。应该是这个

uname = document.getElementById("username").value.toString();
pword = document.getElementById("password").value.toString();
于 2013-08-18T13:39:44.140 回答
2

您需要选择值来代替 html 元素。

您需要为此使用 .value 。

<script>

        function login() {

            var xmlhttp;
            var uname = "";
            var pword = "";
            var date;

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }

            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            uname = document.getElementById("username").value.toString();
            pword = document.getElementById("password").value.toString();
            date = new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();
            xmlhttp.open("GET", "login.php?uname=" + uname.toString() + "&pword=" + pword.toString() + "&date=" + date, true);
            xmlhttp.send();

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("response").innerHTML = uname.toString() + "<br/>" + pword.toString() + "<br/>" + date + "<br/>" + xmlhttp.responseText;
                }
            }

        }
    </script>
于 2013-08-18T13:42:41.603 回答
1

您必须使用.value而不是.toString(). .toString()仅尝试将 Object 转换为字符串表示形式。

var uname = document.getElementById("username").value;
var pwd = document.getElementById("password").value;

另一种方法是使用FormData.

var formData = new FormData(document.forms[0]);
xmlHttp.send(formData);
于 2013-08-18T13:41:14.103 回答