Ajax 传递数组、表单+

一、AJAX概述

1. AJAX 全称 asynchronous（异步） javaScript and xml ， 在项目中AJAX主要用于通过异步请求的方式与服务器进行交互。 通过在应用中使用AJAX技术给广大的网民用户带来了全新的体验。

2. AJAX的核心 ： 通过使用XHR对象，向服务器发送异步请求。

3异步请求的特点：异步请求响应的是一段字符串文本信息（响应的是网页的局部）。不会造成整张页面的刷新。

4.AJAX不可以进行文件的导出功能，因为导出excel，实际上是文件下载，后台需要往前端（浏览器）写文件流的。而Ajax请求获取数据都是“字符串”，整个交互传输用的都是字符串数据，它没法解析后台返回的文件流，但浏览器可以。

二、使用AJAX开发（原始）

/**
 *  1 创建xhr对象 ： 注意浏览器的差异
 *  IE5 6 或以下 版本 xhr = new ActiveXObject("Microsoft.xmlhttp");
 *  非 IE5 6 或以下 版本 xhr = new XMLHttpRequest();
  */
var xhr;
if(window.ActiveXObject) { // IE5 6 或以下 版本
    xhr = new ActiveXObject("Microsoft.xmlhttp");
}else {
    xhr = new XMLHttpRequest();
}
// 2 明确请求目标和请求方式
xhr.open('GET','/AjaxRequest');
// 3 发送请求
xhr.send();
// 4 处理解析响应
xhr.onreadystatechange = function () {
    /**
     * 使用xhr对象中的响应内容
     * xhr在整个运行过程中有自己的状态， 而xhr.readyState的返回值表示整个请求过程的状态：
     *  0 代表请求还未初始化，还没有调用send方法
     *  1 代表调用了send方法，发送了请求
     *  2 请求已经返回了，但是响应的内容还没开始解析
     *  3 开始解析响应内容了，但还没解析完
     *  4 完全解析完毕响应内容，我们可以使用了
     */
    if(xhr.readyState==4 && xhr.status==200) {// 代表响应已经完全解析完毕可以使用了
        // 获取到响应内容
        var txt = xhr.responseText;
        console.log(txt);
        // DOM编程
        document.getElementById('nameMsg').innerHTML = txt;
    }
}

三、发送post请求

var strIds = ['1','2','3']
$.ajax({
            url : "*****",		//后台请求地址
            type:"post",		//请求方式,post请求 ,可以改成get请求
            dataType : "json",	//后台返回值类型,一般均为json
            data:{ids:strIds},	//请求后台所带的参数，为键值对
            traditional : true,	//是否序列化  注：传递类型为数组，则必须加此项为true，否则后端接受不到参数！！！！！
            async : false,		//是否为异步请求
            success:function (data) {	//data为 请求后台返回的数据
                alert(data.status)
            },
            err:function () {
                alert("失败！")
            }
        })

注：传递置后端数据类型为数组时，则traditional 必须加此项为true，否则后端接受不到参数！！！！！

---

注：若不加traditional : true，则需要在后端使用@RequestParam（value=""）指定接受参数的类型，如下↓

	@RequestMapping(value = "/****",method = RequestMethod.POST)
    @ResponseBody
    public Object manyFiling(@RequestParam(value="ids[]")String[] ids, HttpServletRequest request){
    }

四、使用ajax传递表单数据。

var form = $('#formId').serialize();
$.ajax({
            url : "*****",		//后台请求地址
            type:"post",		//请求方式,post请求 ,可以改成get请求
            dataType : "json",	//后台返回值类型,一般均为json
            data:form,	//请求后台所带的参数，为表单时，只写定义的变量。
            traditional : true,	//是否序列化  注：传递类型为数组，则必须加此项为true，否则后端接受不到参数！！！！！
            async : false,		//是否为异步请求
            success:function (data) {	//data为 请求后台返回的数据
                alert(data.status)
            },
            err:function () {
                alert("失败！")
            }
        })

若传递后台的参数除了表单还有其他参数，则进行数据的拼接，如下↓

  data:form+'&codes='+codes   //不能写{}键值对形式的！