Question

我正在尝试从JavaScript获取表单值。表单的HTML代码是：

<form action="./ExampleServlet" method="POST" id="myform">
    <label>Username</label> 
    <input type="text" name="user"><br>

    <label>Password</label> 
    <input type="password" name="pswd" id="launchX"><br>

    <div class="action_btns">
        <div class="one_half last" id="loginButton">
            <a onclick="document.getElementById('myform').submit();" class="btn btn_red">Login</a>
        </div>
        <div class="one_half last" id="bottonBack">
            <a href="#closeButton" class="btn btn_red">Back</a>
        </div>
    </div>
</form>

$(function(){
    $("#launchX").keypress(function (e) {
        if (e.keyCode == 13) {
            alert('You pressed enter!');
            $.ajax({
                type: "POST",
                url: "./ExampleServlet",
                //data: {formValues: "formValues="+JSON.stringify($("#myform"))}
                data : { 
                    formValues: "formValues=" + $("#myform")[0].action
                }
            });
        }
    });
});

如何只向表单的值（user和pswd参数）发送给我的servlet？

注1：我评论//data: {formValues: "formValues="+JSON.stringify($("#myform"))}切换出一些服务器端控制台输出测试。

注意2：在这种情况下，表单$("#myform")[0].action正确地返回打印servlet的url。我还尝试了$("#myform")[0].method，并按预期返回post字符串。

注3：表单JSON.stringify($("#myform"))返回整个“表单对象”并打印所有表单字段，但我找不到字段“user”和“pswd”，即我需要的参数。

我想使用$('#myform').serialize()，但我不确定。

Answer 1

如您所知，您应该在表单上使用serialize()方法。方法如下：

$("#launchX").keypress(function (e) {
    if (e.keyCode == 13) {
        $.ajax({
            type: "POST",
            url: "./ExampleServlet",
            data: $('#myform').serialize()
        });
    }
});

请注意，您可以通过遍历DOM来查找与引发事件的输入相关的表单并从该表单设置AJAX请求的所有属性，从而使其更具动态性：

$("#launchX").keypress(function (e) {
    if (e.keyCode == 13) {
        var $form = $(this).closest('form');
        $.ajax({
            type: $form.prop('method'),
            url: $form.prop('action'),
            data: $form.serialize()
        });
    }
});

上述任何一种都适合你。

通过JavaScript访问表单值

1 个答案: