如何使用jQuery AJAX无刷新页面保存春天表单数据？ [英] How to save Spring form data using jquery ajax without refreshing page?

问题描述

我尝试这个的例子...其中学生类对象也越来越在控制器侧。我们可以直接使用它。但这里的页面是越来越提交。

在这里，我希望它使用jQuery AJAX和后数据为类对象调用POST方法。而不是发送每个输入字段值。

我怎样才能做到这一点？

例如我想post请求发送到该控制器

  @RequestMapping（值=/传递addStudent，方法= RequestMethod.POST）
   公共字符串传递addStudent（@ModelAttribute（SpringWeb）学生的学生，
   ModelMap模型）{
      //这里将是我的code使用Student对象....

      返回结果;
   }
 

使用这个春天的形式。

 ＆LT;形式：形式方法=POSTACTION =/的HelloWeb /传递addStudent＆GT;
   ＆LT;表＆gt;
    ＆其中; TR＆GT;
        ＆LT; TD＆GT;＆LT;形式：标签路径=名与GT;名称＆LT; /形式：标签＆gt;＆LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT;形式：输入路径=名/＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆其中; TR＆GT;
        ＆LT; TD＆GT;＆LT;形式：标签路径=年龄与GT;年龄＆LT; /形式：标签＆gt;＆LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT;形式：输入路径=年龄/＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆其中; TR＆GT;
        ＆LT; TD＆GT;＆LT;形式：标签路径=ID＆GT; ID＆LT; /形式：标签＆gt;＆LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT;形式：输入路径=ID/＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆其中; TR＆GT;
        ＆所述; TD列跨度=2＆GT;
            ＆LT;输入类型=提交值=提交/＆GT;
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /形式：形式GT;
 

解决方案

我将与现有回答的问题..的 jQuery的AJAX提交表单

有关Spring的模型属性映射工作，你只需要确保表单输入名称保持一致性。逐步转换您的传统形式提交给一个Ajax风格的形式最好的方式提交是陷阱的形式提交事件，序列化​​的形式，使Ajax调用。由于所有的参数名称和值要保持一致，你的后台code将工作的。

注意：您要处理的响应，虽然方式不同，因为一个正常的表单提交申报成功或错误页面，而阿贾克斯则需要别的东西。但由于这个问题是关于表单提交，将不赘述了约响应处理。

希望这回答了你的问题。

i try out this example... where student class object is getting at controller side. and we can use it directly. but here the page is getting submitted.

here i want it call the post method using jquery ajax and post data as class object. instead of sending each input field value.

how can i achieve this?

for example i want to send post request to this controller

@RequestMapping(value = "/addStudent", method = RequestMethod.POST)
   public String addStudent(@ModelAttribute("SpringWeb")Student student, 
   ModelMap model) {
      //here will be my code to use student object....

      return "result";
   }

using this Spring form..

<form:form method="POST" action="/HelloWeb/addStudent">
   <table>
    <tr>
        <td><form:label path="name">Name</form:label></td>
        <td><form:input path="name" /></td>
    </tr>
    <tr>
        <td><form:label path="age">Age</form:label></td>
        <td><form:input path="age" /></td>
    </tr>
    <tr>
        <td><form:label path="id">id</form:label></td>
        <td><form:input path="id" /></td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="submit" value="Submit"/>
        </td>
    </tr>
</table>  
</form:form>

解决方案

I am going to answer with an existing question.. jQuery AJAX submit form

For Spring's model attribute mapping to work, you only have to make sure the form input names stay consistent. The best way to progressively convert your traditional form submit to an ajax style form submit is to trap the form submit event, serialize the form and make an ajax call. Since all param names and values are going to remain consistent, your backend code will work as is.

Note: You will have to handle responses differently though, since a normal form submit returns the success or error page, while with ajax you'll need something else. But since this question is about form submission, won't go into details about response handling.

Hope this answers your question.

这篇关于如何使用jQuery AJAX无刷新页面保存春天表单数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！