Ajax使用总结

1、传送普通json数据，例子：

使用jquery封装的ajax，将数据进行封装成json字符串，使用JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串：

var student = {
					"stuId": 999, "stuName": "tom", "stuAge": 23, "address": {
					"province": "shandong", "city": "heze",
					"street": "hello"
					},
					"schoolList": [
					{
					"schoolName":"schoolONe",
					"schoolSize":500
					},{
					"schoolName":"schoolTwo",
					"schoolSize":1000
					},{
					"schoolName":"schoolThree",
					"schoolSize":2000

					}
					],
					"scoreMap": { "yingyu": 100, "shuxue": 80, "wuli": 90
					}
					};
			
			var requestBody=JSON.stringify(student); //因为发送的是json形式，所以通过这个将js对象转成json

进行传送：

$.ajax({
				"url":"save/student.json",   //用于接收数据的方法
				"type":"post",  //方法使用post
				"data":requestBody,	//requestbody是上面数据封装好的js对象
				"dataType":"json",	//返回的是json字符串
				"contentType":"application/json;charset=utf-8",	//发送的是格式，必须指明		
				"success":function(response){
					console.log(response);
				},
				"error":function(response){
					console.log(response);
				}
			});

后端接收代码：注意！！！（这里封装了一个Student类，增加getter,setter，对应ajax发送的属性，方便直接通过responseBody映射。如果没有封装实体类，可以通过@responsebody HashMap data(名字随意)，封装一个hashmap获得前端发送的数据，通过data.get(“stuId”）获得数据。）

 @ResponseBody
 @RequestMapping("/save/student.json") 
 public Student saveStudent(
	@RequestBody Student student) {
 logger.info("student:"+student.toString()); // 将查询到的student封装到ResultEntity中
 return student; 
 }

2、传送带文件的数据，例子：

以传送图片为例：

var formData = new FormData(); //创建一个新的formdata
			
			formData.append("returnPicture", file);  //将要携带的数据append
			
			// 发送Ajax请求上传文件
			$.ajax({
				"url":"[[@{/project/create/upload/return/picture.json}]]",  //接受的方法
				"type":"post",
				"data":formData, //上面数据的名字
				"contentType":false,  //必须设为false
				"processData":false, //必须设为false
				"dataType":"json",
				"success":function(response){
					
					var result = response.result;
					
					if(result == "SUCCESS") {
						alert("上传成功！");
						
						// 如果上传成功，则从响应体数据中获取图片的访问路径
						returnObj.describPicPath = response.data;
					}
					
					if(result == "FAILED") {
						alert(response.message);
					}
					
				},
				"error":function(response){
					alert(response.status + " " + response.statusText);
				}
			});

后端代码：
使用MultipartFile进行接收

	@ResponseBody
	@RequestMapping("/create/upload/return/picture.json")
	public ResultEntity<String> uploadReturnPicture(
			
			// 接收用户上传的文件
			@RequestParam("returnPicture") MultipartFile returnPicture) throws IOException {
		
		returnPicture.getInputStream(); //拿到输入流，进行操作
		
		// 2.返回上传的结果
		return uploadReturnPicResultEntity;
	}

如果是使用form上传：要设置enctype=“multipart/form-data”

<form  id ="form2" action="upload2" enctype="multipart/form-data" method="post">
	    <input type = "file" name= 'photo' />
	  	<input type="text" name="name" value="upload"/>
	    <input type="button" id = "button2" value="ajax上传" onclick="fileupload2()">
	    <input type ="submit" value="直接上传">
	    
	</form>

ajax中进行这样的处理：

var formData = new FormData($("#form2")[0]);

后端获取前端传来的文件，通过表单中的name属性获取：

 @ResponseBody
    @RequestMapping(value="/upload1",produces="text/html;charset=utf-8")
    private String upload1(@RequestParam("photo")CommonsMultipartFile multipartFile,HttpServletRequest request) {
        
            InputStream inputStream = multipartFile.getInputStream();
            FileUtils.copyInputStreamToFile(inputStream, file);
            if(inputStream!=null){
                inputStream.close();
            }
            return "文件上传成功！";
        } catch (Exception e) {
            e.printStackTrace();
            return "文件上传失败！";
        }
    }

3、传送不以json形式的数据，例子：

前端代码：

function sendJson2(){
			$.ajax({ 
			      type: "POST",   
			      url: "${APP_PATH}/upload4",
			      data:{
			    	  'tom':2,
			    	  'jerry':3
			      },
			      success: function(data){
			        console.log(data);
			      },
			      error: function(data){     
			    	  console.log(data); 
			      }     
			    });
			  }

后端代码：直接通过数据里的key值进行映射，获取数据。或者封装一个实体类，带有tom和jerry属性，直接通过映射获取数据。

@ResponseBody
    @RequestMapping(value="/upload4")
    private String upload4(String tom) {
    	
    	
    	System.out.println(tom);
    	return tom;
    
    }

4、传送数组形式的非json数据，例子：

$.ajax({
				"url":"client/del/more.json",
				"type":"post",
				"data":{
					idArr:[12,13]
				},
				//"contentType":"charset=utf-8",	这行不可以加
				"traditional":true,	//这行传送数组数据需要，可避免数组深度序列化
				//"async": true,
				"successs":function(response){
					layer.msg("删除成功");
				},
				"error":function(response){
					layer.msg("删除失败");
				}
			});

后端代码：

@RequestParam("idArr") Integer[] cIdArr,
或
Integer[] cIdArr
或
@RequestParam("idArr")ArrayList<Integer> cIdArr,
//当传送的数据只有数组时