使用JavaScript Ajax将formdata发送到Spring MVC

时间:2016-06-28 14:22:55

标签: javascript ajax spring-mvc

我在JSP中使用JavaScript。我可以使用<form action>将formData发送到Spring Controller,但我现在需要通过Ajax发送。我没有使用JQuery或AngularJS或任何其他JS框架。

我的表格是:

<form:form  id="saveAddressForm" modelAttribute="address">
    <tr>
        <td><label>Address1</label></td>
        <td><input type="text" name="addressLine1"></td>
        <td><label>Address2</label></td>
        <td><input type="text" name="addressLine2"></td>
    </tr>
    <tr>
        <td><label>LandMark</label></td>
        <td><input type="text" name="londMark"></td>
        <td><label>City</label></td>
        <td><input type="text" name="city"></td>
    </tr>
    <tr>
        <td><label>Pincode</label></td>
        <td><input  type="number" name="pincode"></td>
        <td></td>
        <td><input type="submit" value="Save Addess" onsubmit="saveAddress()"></td>
    </tr>
</form:form>

JS功能:

function saveAddress(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        // On success i need to display a message.
    }
  };
xhttp.open("POST", "add_address.html", true);
xhttp.send();}

这里,我的formdata ie。,Address对象不包含在请求中。

@RequestMapping(value = "/add_address", method = RequestMethod.POST)
public String addAddress(@ModelAttribute("address") Address address, Model map)
{

    // Services will be called here.
    return null;
}

我想,我遗漏了一些要添加我的对象的东西。

我在SOF中看到几个帖子,他们用JQuery或AngularJS解决了。我不知道这些。

修改

思考如何改进我的问题。 我想&#34; modelAttribute&#34;发送给控制器。不是单独的参数,也不是通过JS框架。

2 个答案:

答案 0 :(得分:0)

有什么问题?

您需要添加参数以构建Adress对象。

请参阅Send POST data using XMLHttpRequest

答案 1 :(得分:0)

您可以使用jquery轻松序列化表单数据并传递请求。

以下是使用jquery修改的代码。

function saveAddress(){
    var xhttp = new XMLHttpRequest();
    var form = document.getElementById('saveAddressForm');
    var data = new FormData(form);
    xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        // On success i need to display a message.
    }
  };
xhttp.open("POST", "add_address.html", true);
xhttp.send(data);}