JS——我的第一个AJAX程序

common.js

//common.js
function $(id){
	return document.getElementById(id);
}
var xhr;
function createXhr() {
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
		return xhr;
	}else{
		xhr = new ActiveXObject("Microsoft XMLHttp");// Microsoft XMLHttp大小写随意
		return xhr;
	}
}



index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="common.js"></script>
</head>
<body>
	<button οnclick="getMsg()">发送请求</button>
	<div id="show"></div>
	<script>
		function getMsg(){
			//1. 创建xhr
			var xhr = createXhr();
			console.log(xhr);
			//2. 创建请求
			xhr.open("GET","04-response.php",true);
  		 	//3. 设置回调函数—onreadystatechange
  		 	xhr.onreadystatechange = function() {
  		 		if(xhr.readyState == 4 && xhr.status == 200){ //status
  		 			//接收响应数据
  		 			console.log("1111");
  		 			var resText = xhr.responseText;
  		 			$("show").innerHTML = resText;
  		 			console.log(resText);
  		 		}
  		 	}
  		 	//4. 发送请求
  		 	xhr.send();
		}
	</script>
</body>
</html>
04-response.php

<?php 
	
	echo "我的第一个AJAX程序";
?>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现二级(多级)联动的方法一般有两种,一种是通过页面刷新实现,另一种是通过Ajax实现。下面我将介绍一种基于Ajax的实现方法。 首先,在前端页面中建立两个下拉框,第一个下拉框用于选择省份,第二个下拉框用于选择城市。当选择省份后,第二个下拉框中应该只显示该省份下的城市列表。 在后端,我们需要编写一个Web服务,用于获取城市列表。该Web服务应该接收省份名称作为参数,并返回该省份下的城市列表。在Asp.Net中,我们可以使用WebMethod来实现该功能。 然后,在前端页面中,我们需要使用Ajax来调用该Web服务,并将返回的城市列表显示在第二个下拉框中。具体实现方法如下: ```javascript // 定义一个函数,用于获取城市列表 function getCityList(province) { $.ajax({ type: "POST", url: "CityService.asmx/GetCityList", data: "{'province':'" + province + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { // 将返回的城市列表显示在第二个下拉框中 var cityList = response.d; var citySelect = $("#citySelect"); citySelect.empty(); for (var i = 0; i < cityList.length; i++) { var cityOption = "<option value='" + cityList[i] + "'>" + cityList[i] + "</option>"; citySelect.append(cityOption); } }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); } }); } // 当选择省份时,调用getCityList函数获取城市列表 $("#provinceSelect").change(function () { var province = $(this).val(); getCityList(province); }); ``` 需要注意的是,getCityList函数中的url应该指向我们编写的Web服务的地址。另外,我们还需要在Web.config文件中配置一些内容,具体可以参考相关文档。 这样,我们就实现了基于Ajax的二级(多级)联动功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值