使用Ajax：get请求、post请求、ajax请求、载入文件、设置Ajax选项、序列号字符串

最新推荐文章于 2023-07-17 14:39:00 发布

无知的小菜鸡

最新推荐文章于 2023-07-17 14:39:00 发布

阅读量436

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_41897680/article/details/104738467

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Ajax优点
Ajax主优点是：与传统的页面刷新请求不同，Ajax实现局部数据请求和更新功能，使得客户端与服务器端交互的数据量大大降低，节省了大量带宽，同时请求响应的速度也变得更加迅速

使用JavaScript创建Ajax对象

以下Ajax案例与jQuery有关
jQuery封装了Ajax交互过程，用户仅需要调用jQuery方法，就可以轻松实现客户端与服务器端异步通信

使用get请求
jQuery定义了get()方法，专门负责通过远程HTTP GET请求方式载入信息。该方法具有一个简单的GET请求功能，以取代复杂的$.ajax()方法

jQuery.get(url,[data],[callback],[type])

第一个参数为必须设置项，后面3个参数为可选参数
url：表示请求页面的url地址
data：表示一个对象结构的名值对列表
callback：表示异步交互成功之后调用的回调函数。回调函数的参数值为服务器端响应的信息
type：表示服务器端响应信息返回的内容格式，如XML、HTML、Script、JSON和Text，或者_default

例：向test.php文件发送一个请求，并把一组数据传递给该文件，然后在回调函数中读取并显示服务器端响应的信息
test.php

[
	{name:'Tom',age:15},
	{name:'Jack',age:18}
]

get请求

<input type="submit" value="jQuery实现get请求" />
		<script type="text/javascript">
			$('input').click(function() {
				$.get('test.php', {
					name: 'cccc',
					age: 10
				}, function(data) {
					alert(data)
				})
			})
		</script>

注：
1、get方法的data参数是传递给服务器端的数据，function中的参数data是服务器返回的数据，两者不是一个东西
2、get请求中也可以将data数据直接写在url之后

$('input').click(function() {
	$.get('test.php?name=csss&age=10',function(data){
		alert(data)
	}
})

3、jQuery中还有getJSON()和getScript()两个方法，前者专门请求载入JSON数据，后者请求载入Javascript文件，本质上就是get方法指定了返回值类型

结果：
在这里插入图片描述

POST请求
jQuery定义了post()方法，专门负责通过远程HTTP POST请求方式载入信息。该方法具有一个简单的POST请求功能，以取代复杂的$.ajax()方法

Jquery.post(url,[data],[callback],[type])

使用方式与get方式相同

ajax()请求
ajax()方法是jQuery实现Ajax的底层方法，它是get()、post()等方法的基础。对于特殊的数据请求和响应处理，应该选择$.ajax()方法；但是在没有特殊需求时，使用get、post方法即可

jQuery.ajax([settings])

该方法只有一个参数，一个列表结构的对象，包含各配置及回调函数

例：加载JavaScript文件

$.ajax({
	type:'GET',          //请求方式
	url:'test.js',       //请求文件的url
	dataType:'script'    //响应的数据类型
})

例：把客户端的数据传递给服务器，并获取服务器的响应信息

$.ajax({
	type: 'POST',
	url: 'test.php',
	data: 'name=Tom&age=12', //传递给服务器的数据
	success: function(data) { //异步通信成功后的回调函数
		alert(data)
	}
})

例：加载HTML页面

$.ajax({
	url: 'test.html',
	cache: false, //进展缓存
	success: function(html) {
		$('#box').append(html) //把HTML片段附加到当前文档的盒子中
	}
})

例：以同步方式加载数据，当使用同步方法加载数据时，其他用户操作将被锁定

var html = $.ajax({
	url: 'test.php', //请求文件的url
	async: false //同步请求
})

ajax()方法还有其它很多参数，这里就不一一列举
注：设置了dataType选项，应确保服务器返回正确的MIME信息，例如，XML返回text/xml；如果dataType为script，则在请求时，如果请求文件与当前文件不在同一个域名中，所有的PSOT请求都被转换为GET请求，因为jQuery将使用DOM的script标签来加载响应信息

跟踪状态
jQuery在XMLHttpRequest对象定义的readyState属性的基础上，对异步交互中服务器响应状态进行了封装，提供了6个响应事件，以便于进一步细化对整个请求响应过程的跟踪

事件	说明
ajaxStart()	Ajax请求开始时进行相应
ajaxSend()	Ajax请求发送前进行相应
ajaxComplete()	Ajax请求完成时进行相应
ajaxSuccess()	Ajax请求成功时进行相应
ajaxStop()	Ajax请求结束时进行相应
ajaxError()	Ajax请求发生错误时进行相应

载入文件
遵循Ajax异步交互的设计原则，jQuery定义了可以加载网页文档的方法load()。该方法能够把加载的网页文件附加到指定的网页标签中
例：
p.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>load()方法载入网页文件</p>
	</body>
</html>

jQuery脚本

<script type="text/javascript">
	$(function() {
		$('input').click(function() {
			$('div').load('p.html')
		})
	})
</script>

注：使用ajax()方法可以替换load方法，因为load方法是以ajax()方法作为底层来实现的

$(function() {
	$('input').click(function() {
		var str = ($.ajax({ //调用ajax方法，返回XMLHttpRequest对象
			url: 'p.html', //载入url
			async: false, //禁止异步载入
		})).responseText //获取对象中包含的服务器响应信息
		$('div').html(str) //把载入的网页内容附加到div元素内
	})
})

设置Ajax选项
ajaxSetup()方法可以预设异步交互中通用选项，在该方法中设置的选项，可以实现全局共享，从而在具体交互中只需要设置各项话参数即可。该方法的参数与ajax方法相同

例：

$(function() {
	$.ajaxSetup({ //预设公共选项
		url: 'test.php', //请求的url
		global: false, //禁止触发全局Ajax事件
		type: 'POST', //请求方式
		dataType: 'text', //响应数据的类型
		success: function(data) { //响应之后的回调函数
			alert(data)
		}
	})
	$('input').eq(0).click(function() {
		$.ajax({
			data: 'name=第一个'
		})
	})
	$('input').eq(1).click(function() {
		$.ajax({
			data: 'name=第二个'
		})
	})
})

大体用法应该这样，运行了以下存在一些问题，url是相对路径时，编译器软件和浏览器都是找不到文件，修改为绝对路径时，编译软件可以运行，浏览器显示不允许载入本地文件

序列化字符串
了解
serialize()方法可以将客户端提交的信息转换为由&字符连接的多个名值对

<form action="#" method="post">
	姓名：<input type="text" name="user" /> <br />
	性别：
	男<input type="radio" name="sex" value="男" />
	女<input type="radio" name="sex" value="女" /><br />
	<input type="submit" value="jQuery实现get请求" id="submit" />
</form>
<p></p>
<script type="text/javascript">
	$("input[type='submit']").click(function() {
		$("p").html($("form").serialize())
		return false;        //取消默认行为，这里的默认行为是提交表单
	})
</script>