Question

嗯，这可能是一个noob问题，但是在长时间试图调试之后我无法解决问题。我试图使用ajax提交表单，然后在我的控制器中，我将使用HttpServletRequest解析输入值。但是，服务器端的所有值都为null。我确保名称匹配，但是......

这是我的表格：

<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（这是html表单将发布¹）时，问题是您正在发送JSON，这是默认类型$ .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”（默认格式为表格）并直接发布表单而不使用click函数将数据转换为json格式。或者你可以在没有JQuery的情况下尝试这个Ajax代码，它一直适用于我，只需用你的表单字段修改代码，

     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获取表单输入值？

2 个答案: