ajax请求（模板+案例）

一时失言乱红尘 2021-09-27 20:32 332阅读 0赞

### Ajax简单模板 ###

*   *  使用jQuery实现 ajax模板
     *  真实项目中的使用
     *  Ajax上传表单
     *  Ajax传递数组到后台

## 使用jQuery实现 ajax模板 ##

$.ajax({ 
    	url : xxx, // 请求地址
    	type : "post", // 请求的类型，可选post、get等
    	dataType : "json" ,// 返回的类型，可选xml、json、script 或 html
    	data : { }, // 请求的数据,规定连同请求发送到服务器的数据 (data1)
    	async : "false" , // 是否异步 默认为true
    	success : function(data){  // 请求成功时的回调函数 (data2)
    		...
    	},
    	error : function(data){  // 请求失败时的回调函数
    		...
    	}
    })
    注:以上两个data(data1,data2)意义不同 一个是传出的数据 一个是传回的数据。

## 真实项目中的使用 ##

Ajax:
    	$.ajax({ 
    		url : baseURL+"/xx/list",// 请求地址
    		type : "POST",// 请求类型
    		dataType : "json",// 返回类型
    		data : { },// 请求的数据 参数
    		success : function(data){  // 接收从后台返回的数据
    			vm.firstCategory = data.list.rows; //给vm对象(vue对象)中的firstCategory赋值
    			window.location.reload(); // 局部刷新
    		}
    	})
    Vue.js:
    	var vm = new Vue({ 
    		el : "#id", //指定区域id
    		data : { 
    			firstCategory : [],// 一级分类列表
    		}
    	})
    HTML:
    	<option v-for="cate in firstCategory">{ { cate.categoryName}}</option>

## Ajax上传表单 ##

<div id="form-div">
        <form id="form1" action="/users/login" method="post">
            <p>用户名：<input name="userName" type="text" id="user" tabindex="1" size="15" value=""/></p>
            <p>密　码：<input name="password" type="password" id="pw" tabindex="2" size="16" value=""/></p>
            <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
        </form>
    </div>
    $.ajax({ 
    	//几个参数需要注意一下
        type: "POST",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "/users/login" ,//url
        data: $('#form1').serialize(),
        success: function (result) { 
        	 // console.log(result);//打印服务端返回的数据(调试用)
             if (result.resultCode == 200) { 
             	alert("SUCCESS");
             }
        },
        error : function() { 
    		alert("异常！");
        }
    });

## Ajax传递数组到后台 ##

$("#test").click(function(){ 
    	var arr = ["dd","ddd"];
    	arr = $.makeArray(arr);
    	$.ajax({ 
    		url : '${pageContext.request.contextPath}/xxx/xx', // 请求地址
    		type : "post", 
    		dataType : "json" ,
    		data : { 
    			"arr": arr,
    			}, 
    		traditional: true, // 防止深度序列化
    		async : "true" , 
    		success : function(data){  
    			
    		},
    	});
    });

@RequestMapping(value="/xx")
    @ResponseBody
    public CommJson test(String[] arr) { 
    	//String[] array =request.getParameterValues("arr"); // 这也可以
    	CommJson ret = new CommJson();
    	System.out.println(arr);
    	return ret;
    }