Ajax 从json文件获取数据

今天的代码主要是说一下前端部分通过Ajax来请求JSON数据

先来看一下在jQuery中ajax的基本用法：

	$.ajax({
		type:'POST', // 规定请求的类型（GET 或 POST）
		url: // 请求的url地址 一般是服务端语言 这里我们选择php
		dataType:'json', //预期的服务器响应的数据类型 这里我们选择json
		data:{},//规定要发送到服务器的数据
		beforeSend:function(){ //发送请求前运行的函数（发送之前就会进入这个函数）
		// ....
		},
		success: function(result){ // 当请求成功时运行的函数
		这里也是我们的主体部分，对于DOM文档的操作以及页面渲染大部分会在这一部分进行
		},
		error:function(result){ //失败的函数
		基本上可以忽略掉，当然也可以输出一些错误信息提醒
		},
		complete:function(){ //请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后，不管成功还是失败 都会进这个函数）
		这个也基本上可以忽略掉
		}
	});

今天的例子是一个城市三级联动通过Ajax来请求到下一个选项的内容

	<select id="province">
		<option>请选择</option>
	</select>
	<select id="city">
		<option >请选择</option>
	</select>
	<select id="area">
		<option >请选择</option>
	</select>

html部分样式不做多的更改主要就是三个下拉菜单

下面是jQuery部分

	$.ajax({
		data: {parent_id: 0}, //发送的数据
		dataType: "json", //数据类型
		type: 'post',   //这里我们选择post方法
		url: '02.php',//发送请求的地址
		success: function (data) {//发送成功时的回调函数
			for (var i in data) {
				$("#province").append("<option value='"+ data[i][2] +"'>" + data[i][1]  +"</option>")
			}
		}
	})
	$(document).ready(function () {
		$("#province").change(function () {
			$("#city").get(0).options.length= 1;//这里做一个清空操作避免之前误选的内容再次出现
			var data = $("#province").find("option:selected").val();
			$.ajax({
				data:{parent_id:data},
				type:"post",
				dataType:"json",
				url:"02.php",
				success:function (data) {
					for(var i in data){
						$("#city").append("<option value='" + data[i][2] +"'>" + data[i][1] +"</option>")
					}
				}
			})
		});
		$("#city").change(function () {
			$("#area").get(0).options.length= 1;
			var data = $("#city").find("option:selected").val();
			$.ajax({
				data:{parent_id:data},
				type:"post",
				dataType:"json",
				url:"02.php",
				success:function (data) {
					for (var i in data){
						$("#area").append("<option value='" +data[i][2] +"'>" +data[i][1] +"</option>")
					}
				}
			})
		})
	})		

我们通过监听前一个下拉菜单的变化来触发后一个菜单的事件 后端部分就根据各自情况编写

---

如有错误，请指正！