Question

我正在开发一个应该包含AJAX以与服务器交互的页面，并且在确定要做什么时遇到了一些麻烦。

以下是应该发生的事情：

创建一个根据一组规则进行验证的表单（我已经完成了这项工作并使其正常工作，因此赢得了详细信息，尽管它们应该在我的代码中清晰可见将包括）。
如果表单成功通过验证，请按照服务器验证握手说明进行操作。

以下是自动验证握手说明：

如果表单已成功验证，请使用表单中的密码并使用＆＃34; login＆＃34;登录服务器。参数。注意：服务器接受的唯一密码是1234
然后您将获得一个仅在短时间内有效的基于时间的密钥。它的形式为＆＃34;有效：＆＃34; +一系列数字和冒号。
获得密钥后，剥离＆＃34;有效：＆＃34;并使用＆＃34;验证＆＃34;键将状态信息仅发送到服务器。参数。具体来说，以这种方式发送它：stateValue + strippedKey 例如，如果用户选择＆＃34; LA＆＃34;并且返回的是＃34;有效：46：10：10：33：46＆＃34;然后发送到服务器＆＃34; LA46：10：10：33：46＆＃34;。
服务器将发回一系列数字和字母
使用已发回的号码和字母，将其发送回＆＃34;提交＆＃34;参数，状态和每个人之间带冒号的人名。表格会告诉您是否成功。

我之前从未使用过AJAX，因此我一直在尝试使用W3school网站上的教程，但我无法弄清楚如何将其应用到这些说明中。

这是我到目前为止所做的:(大多数AJAX代码（函数ajax（））是在我们的教师在课堂上编写的部分代码之后建模的，但是他注释掉了＆＃34; login = 1234＆＃34 ;部分因此我不确定在他这样做之前存在的语法）

<html>
    <head>
        <title>Project 5</title>
    </head>

    <body>
        <form name="myForm" id="myForm" onsubmit="return validateForm()">
            First Name: <input type="text" id="name"> <br>
            <span id="nameErrMsg" class="error"></span> <br />
            Age: <input type="text" id="age"> <br>
            <span id="ageErrMsg" class="error"></span> <br />
            Street Address: <input type="text" id="address"> <br>
            <span id="addressErrMsg" class="error"></span> <br />
            State: <select>
                <option value="la">LA</option>
                <option value="tx">TX</option>
                <option value="ok">OK</option>
                <option value="mi">MI</option>
                <option value="az">AZ</option>
            </select> <br>
            Login Password: <input type="password" id="password"> <br>
            <span id="passwordErrMsg" class="error"></span> <br />
            <input type="submit" value="Submit"> <br>
        </form>

        <script type="text/javascript">
            function validateForm() {
                var ckName = checkName();
                var ckAge = checkAge();
                var ckAddress = checkAddress();
                var ckPassword = checkPassword();

                return ckName && ckAge && ckAddress && ckPassword;
            }

            function checkName() {
                var form = document.myForm;
                var fName = form.name.value;
                var errMsgHolder = document.getElementById("nameErrMsg");
                if(fName.length < 3) {
                    errMsgHolder.innerHTML = "Please enter a name with at least three letters";
                    return false;
                }
                else if(!(/^\S{3,}$/.test(fName))) {
                    errMsgHolder.innerHTML = "Name cannot contain spaces";
                    return false;
                }
                else {
                    errMsgHolder.innerHTML = " ";
                    return undefined; 
                }
            }

            function checkAge() {
                var form = document.myForm;
                var personAge = form.age.value;
                var ageErr = document.getElementById("ageErrMsg");
                if(personAge === "") {
                    ageErr.innerHTML = "Please enter your age";
                    return false;
                }
                else if(/\D/.test(personAge)) {
                    ageErr.innerHTML = "Please enter a numeric age";
                    return false
                }
                else {
                    ageErr.innerHTML = " ";
                    return undefined;
                }
            }

            function checkAddress() {
                var form = document.myForm;
                var strAddress = form.address.value;
                var addressErr = document.getElementById("addressErrMsg");
                if(strAddress === "") {
                    addressErr.innerHTML = "Please enter your address";
                    return false;
                }
                else if(strAddress.length < 12) {
                    addressErr.innerHTML = "Address must contain at least 12 characters";
                    return false;
                }
                else {
                    addressErr.innerHTML = " ";
                    return undefined;
                }
            }

            function checkPassword() {
                var form = document.myForm;
                var passwd = form.password.value;
                var passwordErr = document.getElementById("passwordErrMsg");
                if(passwd === "") {
                    passwordErr.innerHTML = "Please enter your password"
                    return false;
                }
                else {
                    passwordErr.innerHTML = " ";
                    return undefined;
                }
            }

            function ajax() {
                var url = "http://cs.sfasu.edu/rball/351/project5.php";
                var request = new XMLHttpRequest();
                var passwd = document.getElementById("password").value;
                var concat = url+"?"+passwd;
                alert("sending:"+concat);
                request.open("GET",concat, login=1234");
        </script>

    </body>
</html>

有人愿意帮我指出正确的方向吗？

Answer 1

我看了你的代码，看起来你试图将密码代替TRUE / FALSE值作为第三个参数。如果要在代码中使用login = 1234 hardbind，可以使用下面的功能。

＆＃13;

 function ajax() {
                var url = "http://cs.sfasu.edu/rball/351/project5.php";
                var request = new XMLHttpRequest();
                var passwd = document.getElementById("password").value;
                var concat = url+"?login=1234";
                alert("sending:"+concat);
                request.open("GET",concat);
}

＆＃13;

否则，如果要动态传递密码字段值，可以用passwd变量替换1234。如下图所示。

＆＃13;

 function ajax() {
                var url = "http://cs.sfasu.edu/rball/351/project5.php";
                var request = new XMLHttpRequest();
                var passwd = document.getElementById("password").value;
                var concat = url+"?login="+passwd;
                alert("sending:"+concat);
                request.open("GET",concat);
}

＆＃13;

使用AJAX与服务器交互

1 个答案: