通过JavaScript访问表单值

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

如何仅将表单的值（用户和pswd参数）发送到servlet？

注1：我对//data: {formValues: "formValues="+JSON.stringify($("#myform"))}注释//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()
        });
    }
});

以上任何一种都将为您工作。