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代码段中没有重定向代码）和网址将更改为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规范中的设计，而是由许多浏览器实现以维护遗留应用程序。请参阅：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();
    });
});

通过jquery.ajax发布表单数据时，这种现象会让我感到困惑

1 个答案: