JQuery积累 -- 异步提交form表单

jquery

在jquery中异步提交form表单，其实比较简单，可以直接使用jquery内部方法就可以实现。

---

基本方法：

submit()
ajax()

//表单序列化
serializeArray()
serialize()

---

1、html

html中要引入jquery插件：

<script src="js/jquery.min.js?v=2.1.4"></script>

---

2、JS

javascript中核心就是ajax

$(function(){

    // 提交按钮响应事件 
    $("#SubmitBtnID").click(function(){

        // 表单 添加
        $("#FormID").submit(function(){

            $.ajax({
                type:"post",
                url:"addPlan",
                async: true,
                traditional: true,
                contentType: "application/json;charset=UTF-8",

                //此处也可以用$(this).serialize()
                data:$(this).serializeArray(),
                dataType: "json",
                success: function(data){

                    alert(data);

                    console.log("成功！");

                },
            });

            // serialize()方法 获取表单值域/并序列化了
            console.log($(this).serialize());


        });
    });

});

其中 方法：

serializeArray()
serialize()

可以获取表单的值并序列化。

并且这两个方法是jquery里面的，后台可以直接在request中根据在html中name/id取值，也可以直接用javabean 来接收。

---

3、SpringMVC

后台可以直接用bean来接收

    @RequestMapping(value = "addPlan", method = RequestMethod.POST)
    public @ResponseBody String addPlan(StudyPlan plan) throws Exception {


        //StudyPlan 是自定义java bean，这里可以根据实际情况修改

        // 此处可以直接 用bean来接收
        System.out.println(plan);

        return "success";
    }

或者：

在request里面去取值

    @RequestMapping(value = "addPlan", method = RequestMethod.POST)
    public @ResponseBody String addPlan(HttpServletRequest request ,
            HttpServletResponse response) throws Exception {

        // 可以 从 request 中 根据名字name 来获取
        String  name = request.getParameter("表单字段名name");
        // ........

        return "success";
    }

---

总结

• 
  必须引入 jquery js文件
• 
  使用方法：表单的提交、表单的序列化
• 
  其实异步提交表单在jquery中也是比较简单的
• 
  异步最大的用处就是在页面不刷新的情况下提交数据和从服务器端获取数据，浏览器刷新页面通常需要几秒钟，在这个过程中，页面会显示为空白，然后再载入，而且无法准确还原之前显示的状态，比如浏览的位置等等。
• 
  所以异步最大的好处就是用户体验更加流畅。因为每次完整的获取页面，服务器必须返回整个页面，而异步往往只获取页面中的一部分甚至只是数据，因此也提高了服务器端的效率，减少了网络流量。
• 
  异步实现的原理是通过js脚本直接发起http请求，并且接收数据更新页面实现的。