SpringMVC后台程序接收ajax异步提交数据的实例

</pre><span></span><div><span>        在web开发过程中，有时需要在同一个页面进行较为频繁的操作，对于一些频率较高而涉及到的数据量较小的操作，如果总是进行与服务器的交互，这就会给服务器增加额外的负担，所以异步操作是个不错的选择。下面通过一个开发实例记录利用异步传输数据与后台交互的过程，与大家分享。       需求：为一个课程添加学员，在页面刷出的学员列表中选中需要添加的人，然后以异步的方式提交请求。并在不刷新页面的情况下消除刚刚提交的学员数据，可以继续添加学员或进行其他的操作，虽然同样与服务器有多次交互但这样整个过程只涉及到一次刷新页面。</span></div><div><span>    提示：</span></div><div><span>    submit函数不用说了，表单携带参数提交，Onsubmit函数是表单提交前会执行的函数，比如弹出一个提示，一般该函数执行后表单会自动提交。但在本例中，若设Onsubmit函数为ajax方法，因为ajax的目标URL和表单action地址相同，而且同为post方法（get方法收URL字符长度和数据大小限制），所以执行ajax方法后系统不会再自动执行提交动作（我认为的），导致除了在ajax方法中声明的方法外，其他参数不能被传递。这意味着如果ajax函数中必须携带全部需要提交的参数（人生苦短），否则后台Action方法中就出现参数缺失。</span></div><div><span></span></div><div><span>    HTML中提交的js方法：</span></div><div><span></span><pre name="code" class="javascript">  //异步提交
      function _submit_array() {//需要添加所有需要提交的参数
             var level = document.getElementById( "level").value;
             var courseId = document.getElementById( "courseId").value;
             var status = document.getElementById( "status").value;
             var userIds = new Array();
             var items = $('[name = "id"]:checkbox:checked' );//遍历所有被√的用户
             for ( var i = 0; i < items.length; i++) {
                  userIds.push(items[i].value);//将被勾选的用户封装到一个js数组中
            }

             if (userIds.length == 0) {
                  alert( "提交失败！请确保勾选用户或没有选择已经选课的用户！" );
                   return false ;
            }
             if (level == "" || status == "") {
                  alert( "请为学员选择初始状态" );
                   return false ;
            }

            $.ajax({
                              type : "post" ,//提交方法
                              url : "${base}/courseuser/inner_super/o_save.jspx" ,
                              data : {//映射名：实际数据
                                    userIds : userIds,
                                    status : status,
                                    level : level,
                                    courseId : courseId
                              },
                              success : function (data) {//成功提示函数
                                    alert( "提交成功！" );
                                     var table = document.getElementById("maincontent" );
                                     for ( var j = 0; j < userIds.length; j++) {//成功后删除已经选择的行，避免重复添加
                                           var rowIndex = document.getElementById(userIds[j]).rowIndex;
                                          table.deleteRow(rowIndex);
                                    }
                              }
                        });
      }

<pre name="code" class="javascript">//表单提交js方法

function _save() {

             var tableForm = document.getElementById( "jvForm");

            tableForm.onsubmit = _submit_array();

      }

//为课程添加用户的方法：

@RequestMapping("your URL")
    public String save(@RequestParam("courseId")Integer courseId,@RequestParam("level")Integer level,@RequestParam("userIds[]") Integer[] userIds,@RequestParam("status") Integer status,Integer pageNo,HttpServletRequest request,HttpServletResponse response, ModelMap model)
    {
       //do something...
    }

注：@RequestParam是SpringMVC框架自带的用于接收传入参数的注解，userIds[]就是一个js数组，从ajax传递而来的数据名在注解后的括号内捕获，类型包括Integer，String，数组等，这样就获取到了异步传输的数据。