Question

我现在正在构建注册页面，并根据需要标记了用户名和密码输入。简单的代码为：

Username <input id="username" type="text" required/>
Password <input id="username" type="password" required/>
<button id="register">Register</button>
<div id="registerOutput></div>

当我在localhost上使用纯HTML运行这些代码时，＆＃34; required＆＃34;会运作正常。但是，一旦我包含了一个register.js文件，我用它来获取数据并使用AJAX将数据发送到register.php，所需的属性似乎不起作用。在register.js中，简单代码为：

$(document).ready(function(){
    $("#register").on("click", function(){

        var username        = $("#username").val();
        var password        = $("#password").val();

        var userData = "username=" + username + "&password=" + password;

        $.ajax({
            method: "post",
            url: "register.php?",
            data: userData,
            success: function(backData){
                $("#registerOutput").html(backData);
            }
        });
    });
});

有人能告诉我为什么jQuery会覆盖所需的功能吗？如何超越它或者它必须覆盖，我应该如何在我的jQuery代码中做同样的事情？

Answer 1

您可能想稍微重新设计一下代码。有一种方法可以遵循HTML的便利性，但却充分利用了AJAX。

我在jsfiddle编辑了你的例子：https://jsfiddle.net/myezf63b/

所以这里修改了HTML：

<form id="form">
  Username <input id="username" type="text" required/>
  Password <input id="username" type="password" required/>
  <button type="submit" id="register">Register</button>
</form>

<div id="registerOutput">
</div>

基本上我将type="submit"添加到按钮并将其包装在表单中。

这是修改后的jQuery代码：

我添加了e.preventDefault()，这会阻止网站重定向（重新加载页面），并且我使用的submit跟随此模式。

$(document).ready(function(){ $("#form").on("submit", function(e){
    e.preventDefault()
    var username        = $("#username").val();
    var password        = $("#password").val();

    var userData = "username=" + username + "&password=" + password;
        console.log('test')
    $.ajax({
        method: "post",
        url: "register.php?",
        data: userData,
        success: function(backData){
            $("#registerOutput").html(backData);
        }
    });
  });

});

jQuery或AJAX会使HTML＆＃34;必需＆＃34;属性无效？

1 个答案: