9 链(Chaining)和10 . ajax()方法

最新推荐文章于 2024-05-04 17:11:41 发布

今天又是快乐的一天

最新推荐文章于 2024-05-04 17:11:41 发布

阅读量167

点赞数 1

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_42360973/article/details/109631838

版权

JQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

9 链(Chaining)

可以把动作/方法链接在一起。Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

10 . ajax()方法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

$.ajax({name:value, name:value, … })

$("button").click(function(){
    $.ajax({url:"demo_test.txt",success:function(result){
        $("#div1").html(result);
    }});
});

相关属性:

async: 布尔值，表示请求是否异步处理。默认是 true。
data: 规定要发送到服务器的数据。
beforeSend(xhr): 发送请求前运行的函数。
cache: 布尔值，表示浏览器是否缓存被请求页面。默认是 true。
xhr: 用于创建 XMLHttpRequest 对象的函数。
context: 为所有 AJAX 相关的回调函数规定 “this” 值。
success(result,status,xhr): 当请求成功时运行的函数。
error(xhr,status,error): 如果请求失败要运行的函数。
ontentType: 发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。

疫情大数据示例:
阿里云疫情api
注意: AppCode后面＋空格+阿里云申请的id

<!DOCTYPE html>
<html>
<head>
	<title>ajax使用</title>
</head>
<body>
	<h1>全球疫情大数据显示 </h1>  
	当前国家：<span id=country></span>  截止至时间：<span id=time></span>
	<div>
<table id=table1 border="1" style="float: left;">
	<tr>
		<td>省份</td>
		<td>治愈人数</td>
		<td>死亡人数</td>
		<td>疑似人数</td>
		<td>新增人数</td>
		<td>感染人数</td>
	</tr>
	<div id=responsediv></div>
</table>
<select id=select>
	 <option>请选择城市</option>
</select>
<table id=city style="float: left; margin-left: 10px"  border="1">
</table>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">  
 	var obj;
 		$.ajax({
         	url: "http://ncovdata.market.alicloudapi.com/ncov/cityDiseaseInfoWithTrend",
            type: "get",
            beforeSend: function(xhr) { 
			 xhr.setRequestHeader("Authorization", "AppCode  阿里云免费疫情api申请的id ");  
			   	},
            contentType:'application/json;charset=UTF-8',
            dataType: 'json',
            async: false,
            error: function(XMLHttpRequest) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.statusText);
            },
            success: function(data) {
                //完整功能
             console.log(data); //显示在界面上  

                obj = eval(data);   
               $("#country").text(obj.country.childStatistic);
                $("#time").text(obj.country.time); 
              	for (var i = 0; i<obj.provinceArray.length; i++) { 
			$("#table1").append("<tr id=" + i + ">" + 
				"<td >" +obj.provinceArray[i].childStatistic+ 
				"</td>" +
				"<td >" +obj.provinceArray[i].totalCured+ 
				"</td>" +
			"<td >" +obj.provinceArray[i].totalDeath+ 
				"</td>" +
				"<td >" +obj.provinceArray[i].totalDoubtful+ 
				"</td>" +
				"<td >" +obj.provinceArray[i].totalIncrease+ 
				"</td>" +
				"<td >" +obj.provinceArray[i].totalConfirmed+ 
				"</td>" +
				+ "</tr>"); 
				 $("#select").append("<option value="+i+">"+obj.provinceArray[i].childStatistic+"</option>"); 
              	} 
 			 
            }
        });
 		$("#select").change(function(){
 			$("#city").empty();
 		 $("#city").append("<tr><td>城市名</td><td>治愈人数</td><td>死亡人数</td><td>疑似人数</td><td>总的人数</tr>");
		var checkValue=$("#select").val();

		for (var i = 0; i<obj.provinceArray[checkValue].cityArray.length; i++) {
			// console.log(obj.provinceArray[checkValue].cityArray[i].childStatistic);
			 $("#city").append("<tr id=" + i + ">" + 
				"<td >" +obj.provinceArray[checkValue].cityArray[i].childStatistic+ 
				"</td>" +
				"<td >" +obj.provinceArray[checkValue].cityArray[i].totalCured+ 
				"</td>" +
			"<td >" +obj.provinceArray[checkValue].cityArray[i].totalDeath+ 
				"</td>" +
				"<td >" +obj.provinceArray[checkValue].cityArray[i].totalDoubtful+ 
				"</td>" +
				"<td >" +obj.provinceArray[checkValue].cityArray[i].totalConfirmed+ 
				"</td>" +
				+ "</tr>");   
		 }
		
	
});
</script>
</html>

今天又是快乐的一天

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9 链(Chaining)和10 . ajax()方法

9 链(Chaining)可以把动作/方法链接在一起。Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。$("#p1").css("color","red").slideUp(2000).slideDown(2000);$("#p1").css("color","red") .
复制链接

扫一扫

专栏目录