jQuery_ajax调用的几种方法

一、$.ajax()的基础使用

 

<button id="btn">发送请求</button>
<script src="/js/jquery.min.js"></script>
<script>
var params = {name: 'wangwu', age: 300}
$('#btn').on('click', function () {
	$.ajax({
		// 请求方式
		type: 'post',
		// 请求地址
		url: '/user',
		//在发送请求前调用
		beforeSend: function () {
					alert('发送请求前调用')
					//如果用户操作不合规范或密码不正确等情况，则请求不会被发送
					//return false;
		},
		// 向服务器端发送的请求参数
		// name=zhangsan&age=100
		//1 json对线格式传参
		// data: {
		// 	name: 'zhangsan',
		// 	age: 100
		// },
		//2 指定json格式类型要用json字符串格式传参
		data: JSON.stringify(params),
		//2 指定参数的格式类型
		contentType: 'application/json',
		
		// 请求成功以后函数被调用
		success: function (response) {
			// response为服务器端返回的数据
			// 方法内部会自动将json字符串转换为json对象
			console.log(response);
		}
	})
});

 

二、serialize()方法

<form id="form">
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="submit" value="提交">
</form>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$('#form').on('submit', function () {
	// 将表单内容拼接成字符串类型的参数
	// var params = $('#form').serialize();
	// console.log(params)
	serializeObject($(this));
	//禁止页面自动提交刷新
	return false;
});

// 封装serialize方法，将表单中用户输入的内容转换为对象类型
function serializeObject (obj) {
	// 处理结果对象
	var result = {};
	// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
	var params = obj.serializeArray();

	// 循环数组 将数组转换为对象类型
	$.each(params, function (index, value) {
		result[value.name] = value.value;
	})
	// 将处理的结果返回到函数外部
	return result;
}

三、$.ajax发送JSON请求

<button id="btn">发送请求</button>
<script src="/jquery.min.js"></script>
<script>
	// 点2 需要事先定义
	function fn (response) {
		console.log(response)
	}
	$('#btn').on('click', function () {
		$.ajax({
			//要有jsonp这个接口名
			url: 'http://localhost:3000/jsonp',
			// 点1 jsonp默认有参数名，但可以进行自定义名称，即向服务器端传递函数名字的参数名称
			//jsonp: 'cb',
			
			// 点2 回调函数声明为自己先前定义的函数（一般不用，用sucess就好）
			//jsonpCallback: 'fn',
			
			// 表示现在要发送的是jsonp请求
			dataType: 'jsonp',
			
			// 点2 原写法
			success: function (response) {
				console.log(response)
			}
		})
	});

　

四、$.get、$.post的使用

$('#btn').on('click', function () {
		$.get('/base', 'name=zhangsan&age=30', function (response) {
			console.log(response)
		})
});

 

$('#btn').on('click', function () {
		$.post('/base', function (response) {
			console.log(response)
		})
});