如何使用 HttpServletRequest 获取表单输入值？

Question

好吧，这可能是一个菜鸟问题，但经过长时间的调试后我无法确定哪里做错了。我正在尝试使用 ajax 提交表单，然后在我的控制器中，我将使用 HttpServletRequest 解析输入值。但是，所有值在服务器端都是空的。我已确保名称匹配，但是 ...

这是我的表格：

<spring:url var="createBundle" value="/createbundle" htmlEscape="true"/>
 <form id="c-b-form" method="post" action="${createBundle}">
    <div class="modal-form">
        <table class="table-form">
            <tr class="t-details">
                <td class="c-70">
                    <label for="c-b-t">Title</label>
                    <div class="input-txt">
                        <input id="c-b-t" class="txt" type="text" name="bname"/>
                    </div>
                </td>
                <td class="c-30">
                    <label for="c-b-a">Amount</label>
                    <div class="input-txt">
                        <input id="c-b-a" class="txt" type="text" name="bamount"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label for="c-b-c">Category</label>
                    <select id="c-b-c" name="cid">
                        <option value="0">Category</option>
                        <option value="1">Applicace</option>
                        <option value="2">App Game</option>
                    </select><br/>
                </td>
            </tr>
            <tr>
                <td colspan="2">        
                <div>
                    <input id="c-b-btn" class="submit-btn acc-btn" name="c-b" type="submit" value="Save" />
                </div>
                </td>
            </tr>
        </table>
    </div>
</form>

 $('#c-b-btn').click(function(event) {
    var btnId    = '#' + $(this).attr('name');
    var formId   = btnId + "-form";
    var nameId   = btnId + '-t';
    var amountId = btnId + '-a';

    var nameVal   = $(nameId).val();
    var amountVal = $(amountId).val();

    var isNameValid = false;
    var isAmountValid = false;

    if(nameVal.length <= 0) {
        isNameValid = false;
    } else {
        isNameValid = true;
    }


    if(!parseFloat(amountVal) || !$.isNumeric(amountVal)) {
        isAmountValid = false;
    } else {
        isAmountValid = true;
    }

    if(isNameValid && isAmountValid) {
        alert("name\t" + nameVal 
                + "\namountVal\t" + amountVal);
        var json = {
                "bname" : nameVal, 
                "bamount" : amountVal,
                };
        $.ajax({
            url: $(formId).attr('action'),
            data: JSON.stringify(json),
            type: "POST",
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Accept", "application/json");
                xhr.setRequestHeader("Content-Type", "application/json");
            },
            success : function(response) {
                alert("success");
            },
            error : function() {
                alert("erorr");
            }
        });
    }

    event.preventDefault();
    return false;
});

在我的控制器中，我正在尝试解析输入值：

System.out.println((String)request.getParameter("bname"));
//System.out.println((String)request.getParameter("cid"));

我打印出空值；但是，警报显示了我想在我的控制器中获得的正确值。

Answer 1

问题是当您的服务器端脚本期望 application/x-www-form-urlencoded 时您正在发送 JSON（这是 html 表单将 post¹), 这是 $.ajax 发送的默认类型，因此无需设置内容类型，一旦您将对象作为数据参数传递，甚至会为您编码.

    $.ajax({
        url: $(formId).attr('action'),
        data: json,
        type: "POST",
        success : function(response) {
            alert("success");
        },
        error : function() {
            alert("erorr");
        }
    });

或multi-part/formdata用于文件上传

Answer 2

正如 Musa 所建议的，您可以使用 "application/x-www-form-urlencoded"（表单默认设置）并且直接 post 表单而无需使用点击功能将数据转换为 json 格式。或者你可以试试这个 Ajax 没有 JQuery 的代码，它一直对我有用，只需用你的表单字段修改代码，

     var username = document.getElementById("username").value;
     var password  = document.getElementById("password").value;
     var doc = 
     {                                                
          "username" : username, 
          "email" : username,                                    
          "password" : password,                      
     };                                                              
     var url = httpsserver+"/login";
     postJason(url, doc, loginCallback);

  //
function getRequest()
{
  //***** create the AJAX object to do HTTP requests *******
  var request = (typeof window.ActiveXObject != 'undefined')
    ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

  if (request == null)
   alert("Error creating request object!");
  return request;
}  

//
//
function postJason(url, doc, callback)
{
  var request = getRequest();
  var value = JSON.stringify(doc);

  request.open("post", url, true);
  request.onreadystatechange = callback;
  request.setRequestHeader("Content-Type", "application/json");
  request.send(value);
}

如何使用 HttpServletRequest 获取表单输入值？

How to get the form input values using HttpServletRequest?

ajax

jquery

spring-mvc