JavaScript---jQuery 的 ajax

最新推荐文章于 2022-11-26 17:26:47 发布

今天丶

最新推荐文章于 2022-11-26 17:26:47 发布

阅读量169

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45020637/article/details/98778983

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript—jQuery 的 ajax

jquery 调用 ajax 方法: $.ajax({})

格式：$.ajax({});

参数：

type：请求方式 GET/POST

url：请求地址 url

async：是否异步，默认是 true 表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

实例:

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //GET请求
	$.ajax({
		type:"GET", // 请求类型 GET/POST
		url:"js/data.json", // 请求路径
		data:{ // 请求的参数，键值对
			uname:"",
			upwd:""
		},
		dataType:"json", // 预期服务器返回的数据类型
		success:function(result){ // 回调函数，返回的数据
			console.log(result);
		}
	});
	
	//POST请求
	$.ajax({
		type:"POST", // 请求类型 GET/POST
		url:"js/data.json", // 请求路径
		data:{ // 请求的参数，键值对
			uname:"",
			upwd:""
		},
		dataType:"json", // 预期服务器返回的数据类型
		success:function(result){ // 回调函数，返回的数据
			console.log(result);
		}
	});
</script>

$. g e t () 和$ .post()

$.get():

1.请求 json 文件，忽略返回值

$.get(’…/js/cuisine_area.json’);

2.请求 json 文件，传递参数，忽略返回值

$.get(’…/js/cuisine_area.json’,{name:“tom”,age:100});

3.请求 json 文件,拿到返回值,请求成功后可拿到返回值

$.get(’…/js/cuisine_area.json’,function(data){

console.log(data)

});

4.请求 json 文件,传递参数,拿到返回值

$.get(’…/js/cuisine_area.json’,{name:“tom”,age:100},function(data){

console.log(data)

});

$.post()同理

实例:

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    
    //$.get()  
	$.get("js/data.json",{},function(result){
		console.log(result);
	});
	
	//$.post()
	$.post("js/data.json",{},function(result){
		console.log(result);
	});
</script>

$.getJSON()

$.getJSON() 表示请求返回的数据类型是 JSON 格式的 ajax 请求

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>	
<script type="text/javascript">
    $.get("js/data.txt",function(result){
    console.log(result);//返回的数据类型是字符串
});


$.getJSON("js/data.txt",function(result){
    console.log(result);//返回的数据类型是JSON格式
});

</script>

jsonp(待补充)

远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。

利用jQuery 的 ajax模拟向服务器请求数据并作操作:

<script src="js/jquery-3.4.1.js"></script>
<script>
    $.getJSON("js/data.json",{},function(data){
        //获得父元素table对象
        var myTable=$("#myTable");
        //遍历
        for (var i= 0;i<data.length;i++){
            //将集合对象赋值给user
            var user=data[i];
            //拼接新tr对象
            var tr="<tr><td>"+user.uname+"</td><td>"+user.upwd+"</td><td>"+user.age+"</td></tr>";
            //追加到表中
            myTable.append(tr);
        }
    });
</script>