jquery - 通过 jquery.ajax 发布表单数据时，一个现象让我感到困惑

Question

这是我的表格:

<form id="login_form">
    <table border="0">
        <tr>
            <td>username: </td>
            <td colspan="10">
                <input id="username" name="username" type="text" />
            </td>
        </tr>
        <tr>
            <td>password: </td>
            <td>
                <input id="passwd" name="passwd" type="password" />
            </td>
        </tr>
        <tr style="text-align:center">
            <td>
                <input id="login_submit" type="submit" title="submit" />
            </td>
            <td>
                <input type="reset" title="reset" />
            </td>
        </tr>
    </table>
</form>

我的jquery代码:

$(function(){
    jQuery("#login_submit").click(function() {
        jQuery.ajax({
            url:'./login/',
            type:'post',
            data:$("#login_form").serialize(),
            dataType:'html',
            async: false,
            success:function(backData)    {
                alert(data);
            },
            error:function(err){
                alert('error = ' + err);
            }
        });
    });
}); 

令我困惑的是，当我访问url:http://192.168.0.3/CarKeeperServer/user/login.jsp时，点击提交按钮(页面不会定向到一个新页面，因为 jquery 代码片段中没有重定向代码)，并且 url 将更改为 http://192.168.0.3/CarKeeperServer/user/login.jsp?username=df&passwd=sd，其中公开我的用户名和密码，就像在 GET 方法中一样。谁能解释为什么会发生这种情况以及解决方案是什么？非常感谢!

Answer 1

您需要通过调用preventDefault来阻止表单提交。您看到 get 请求被触发的原因是您没有阻止表单提交，该表单正在提交到您所在的当前页面。

默认情况下，表单使用 get 方法将信息发送到服务器。请参阅:http://www.w3.org/TR/html401/interact/forms.html#adef-action

由于表单没有指定默认操作，因此它使用当前页面作为操作。这并未被设计到 HTML 规范中，而是由许多浏览器实现以维护遗留应用程序。请参阅:Is it a good practice to use an empty URL for a HTML form's action attribute? (action="")

$(function(){
    jQuery("#login_submit").click(function(e) {
        jQuery.ajax({
            url:'./login/',
            type:'post',
            data:$("#login_form").serialize(),
            dataType:'html',
            async: false,
            success:function(backData)    {
                alert(data);
            },
            error:function(err){
                alert('error = ' + err);
            }
        });
        e.preventDefault();
    });
});