天天看点

jquery快速入门(完结)请求ajax

$.ajax({

    async: true,

    contentType: ‘application/json’,

    dataType: ‘json’,

    error: function(){

    请求出现错误时,执行的函数

    },

    success: function(data){

    //data就是responseText,是jq处理后的数据,可以直接使用

    },

    url: ‘’,

    type:‘get’

})

json结构参数说明

1 async: 是一个bool类型的值,默认true表示异步请求可以不写,xmlHttp.open(get,url,true)第三个参数一样的意思

2 contentType: 一个字符串表示从浏览器发送服务器的参数的类型,可以不写,例如表示请求的参数是json格式,可以写application/json

3 data: 可以是字符串,数组,json,表示请求的参数和参数值,常用的是json格式的数据

4 dataType: 表示期望从服务器返回的数据格式,可选:xml,html,text,json当我们使用$.ajax()发送请求时,会把该选项的值发送给服务器,那我们的servlet能够读取到dataType的值 就指定浏览器需要的是什么数据,服务器就可以发回需要的数据格式

5 error: 一个函数,当请求发生错误时,执行的函数

error: function(){}

6 success: 一个函数,请求成功,从服务器端返回数据,执行这个函数

XMLHttpRequest对象,当readyState===4 && status === 200 的时候

7 url: 请求的地址

8 type: 请求方式 get,post,不用区分大小写,默认get

主要使用的是 url data dataType success

  • $.post(URL,data,function(data,status,xhr),dataType)
  1. URL 必需。规定将请求发送到哪个 URL。
  2. data 可选。规定连同请求发送到服务器的数据。
  3. function(data,status,xhr) 可选。规定当请求成功时运行的函数。

    额外的参数:

    data - 包含来自请求的结果数据

    status - 包含请求的状态(“success”、“notmodified”、“error”、“timeout”、“parsererror”)

    xhr - 包含 XMLHttpRequest 对象

  4. dataType 可选。规定预期的服务器响应的数据类型。

    默认地,jQuery 会智能判断。

    可能的类型:

    “xml” - 一个 XML 文档

    “html” - HTML 作为纯文本

    “text” - 纯文本字符串

    “script” - 以 JavaScript 运行响应,并以纯文本返回

    “json” - 以 JSON 运行响应,并以 JavaScript 对象返回

    “jsonp” - 使用 JSONP 加载一个 JSON 块,将添加一个 “?callback=?” 到 URL 来规定回调

例子

$.post(“www.blala.com”,{key:val},function(result){

         console.log(result)

},“json”);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(function(){
				$.ajax({
					url:'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js',
					success: function(data){
						console.log(data)
						// 查看data中的数据结构
						// 如果我们请求回来的内容要更新到页面上的话
						// 假设data是{ v: '123'}
						// 我们可以$('div').text(data.v)即可
					}
				})
			})
		</script>
	</body>
</html>

           

继续阅读