我的前端自学 JQuery中的Ajax

最新推荐文章于 2023-10-24 12:10:49 发布

gh100330

最新推荐文章于 2023-10-24 12:10:49 发布

阅读量424

点赞数

分类专栏：自学

本文链接：https://blog.csdn.net/gh100330/article/details/115011750

版权

自学专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、JQuery中提供了$.ajax()方法用于发送ajax请求，在发送ajax请求时，只要调用这个方法就可以了，在方法中需要传递一个对象作为参数，这个参数就是用来配置ajax请求的。

$.ajax({
	// 请求方式
	type: 'get',
	// 请求地址
	url: '/test',
	// 请求数据  如果需要发送JSON字符串数据类型则需要转换成字符串  JSON.stringify({uername: '张三', age: 18})
	data: { uername: '张三', age: 18 },
	// 数据类型   如果需要发送JSON数据类型则需要传递 application/json
	// application/x-www-form-urlencoded为默认值，当使用默认值时，可以不传递此属性
	contentType: 'application/x-www-form-urlencoded',
	// 在请求发送前调用的函数
	beforeSend: function() {},
	// 请求成功调用的函数 如果服务器端返回的数据为JSON字符串，ajax函数会自动将JSON字符串转换为JSON对象
	success: function() {},
	// 请求失败调用的函数
	error: function() {}
})

二、 serialize方法
serialize方法可以将表单中的数据，拼接成字符串类型的参数

var params = $('#form').serialize();

<body>
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="submit" value="提交">
	</form>
	<script>
		$('#form').on('submit', function(){
			var params = $(this).serialize();
			return false;
		})
	</script>
</body>

serialize方法和H5提供的formdata对象没有可比性，serialize方法仅仅用来拼接字符串.
当我们需要在请求发送前，验证用户提交的数据时，可以封装一个将serialize方法返回的字符串转换成对象的函数。JQuery提供了一个方法，serializeArray()，用来将用户输入的表单内容存储在数组里，数组的每一个元素都是对象，数组包含几个对象取决于提交的表单有几个表单控件，它的返回结果为

[{name: '表单的name属性', value: '用户输入的内容'}]

函数封装：

function getSerializeObj() {
	var params = data.serializeArray();
          var obj = {};
          $.each(params, function(index,item){
          		obj[item.name] = item.value;
          })
    return obj;
}

三、$.ajax方法发送JSONP请求
dataType属性指定了ajax方法发送的请求类型为jsonp
jsonp属性用来修改callback的参数名称，根据实际需求决定，默认值为callback，如果服务器端不需要修改则不传入此属性

$.ajax({
	url: '/jsonp',
	dataType: 'jsonp',
	jsonp: 'cb',
	success: funciton(response){ //response就是服务器返回的函数调用 }
})

四、jquery中除了$.ajax方法以外还提供了 $.get和 $.post方法

$.get('/get', {}, funciton(response){})
$.post('/post', {}, funciton(response){})

四、JQuery中的全局事件
JQuery规定，全局事件必须绑定在document身上

$(document).on('ajaxStart', function() { //当页面中有Ajax请求发生时触发 })
$(document).on('ajaxComplete' function() { //当ajax请求结束时触发 })

NProgress插件
插件中定义了jquery中ajax请求发生和结束的效果，插件中准备了css和js文件

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
<script>
	// 直接调用 start()或者done()来控制进度条。
	$(document).on('ajaxStart', function() { NProgress.start(); })
	$(document).on('ajaxComplete' function() { NProgress.done(); })
</script>

gh100330

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的前端自学 JQuery中的Ajax

一、JQuery中提供了$.ajax()方法用于发送ajax请求，在发送ajax请求时，只要调用这个方法就可以了，在方法中需要传递一个对象作为参数，这个参数就是用来配置ajax请求的。$.ajax({ // 请求方式 type: 'get', // 请求地址 url: '/test', // 请求数据如果需要发送JSON字符串数据类型则需要转换成字符串 JSON.stringify({uername: '张三', age: 18}) data: { uername: '张三', age:
复制链接

扫一扫