通过 JavaScript 访问表单值答案

【问题标题】：Access to the form values via JavaScript通过 JavaScript 访问表单值
【发布时间】：2026-01-23 21:20:09
【问题描述】：

我正在尝试从 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"))} 以切换一些服务器端控制台输出测试。

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

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

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

【问题讨论】：

标签： javascript jquery html ajax forms

【解决方案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()
        });
    }
});

以上任何一种都适合你。

【讨论】：