通过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,exposes我的用户名和密码就像在GET方法中一样.谁能解释为什么会发生这种情况以及解决方案是什么？非常感谢!

Answer 1

您需要通过调用preventDefault来阻止表单提交.您看到获取请求的原因是您没有阻止表单提交,即提交到您当前所在的页面.

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

由于表单未指定默认操作,因此它使用当前页面作为操作.这不是HTML规范中的设计,而是由许多浏览器实现以维护遗留应用程序.请参阅:对HTML表单的操作属性使用空URL是一种好习惯吗？(动作= "")

$(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();
    });
});