SSM项目 Jquery实现From表单提交 json后台并接受

2019-6-21 山西太原工作 前台整理
文章总结
主要是前后台的交互代码，浪费了两个小时才弄好，注意 前台往后台返回的时候 使用的并非json格式传入后台 ， 后台使用@ModelAttribute 可以实现自动的封装，装填对象
@ModelAttribute在参数前面加的作用 从model中取出key为user的User对象，model没有User会自动创建，并把前台表单的请求参数赋给这个User对象的对应属性。
from表单在后台一般对应的是一个实体类所以使用@ModelAttribute注解，自己装配，还会上传一些其他的参数，实体类中没有，这时可以使用@RequestParam参数获取

前台Html

<form>
 <input type="text" id="name" name="name" maxlength="10" placeholder="请填写您的姓名">
  <input type="text" id="telphone" name="telphone" maxlength="11" placeholder="请填写您的手机号">
   <button type="button" onclick="myfun_submit()“>确认提交 </button>
</form>

前台Js

‘比方说 格式化from表单之后 还要提交其他参数,可以采用下面的方式
// var data = "pageNo="+no+"&"+ $("form").serialize();
           
function myfun_submit() {
        $.ajax({
            type : "post",
            dataType : "json",
            url : "/bookContact/joinContactSave",
            contentType:"application/x-www-form-urlencoded",
            data:   $("form").serialize(),
            success:function (data) {

                if(data.status == 1){
                    $(".tanchuang").show();
                }
            },//响应成功后的回调函数

        });
    }

后台接受

@Controller
@RequestMapping("/bookContact")
public class BookContactController  {
public void joinContactSave(Model model,
								  @ModelAttribute  BookContactMember bookContactMember,
                                 @RequestParam(required = false, value = "contactItem", defaultValue = "") String contactItem ,HttpServletRequest request,HttpServletResponse response) {
System.out.println(bookContactMember);
}
}