ajax
ajax主要使用的是type url data success这四个属性;type是请求的方式,请求方式有post、delete、update、get等方式主要用的就是这四种。url就是你请求的controller层的地址。data就是你在请求controller层时传给controller层的数据;它是由健跟值来进行获取数据的。success是有后台传到前台的数据在函数的变量属性里;也就是下图的provinces里。这就是简单的ajax;但是在实际的应用中他会跟jq在一起使用。
jq+ajax
$(function () {
//发送请求获取所有的省份,
$.ajax({
type:"GET",//type:请求方式
url:"provience",//请求的uri连接地址
//proviences封装后台返回的JSON数据
//success:请求成功的回调函数
success:function (proviences) {
//proviences是一个集合,获取集合数据,
//循环生成option标签,value属性值为城市名,显示的数据也是城市名
for(var i = 0;i < proviences.length;i++){
//返回的是List集合通过下标获取数据。
//如果返回的是map,根据key获取数据
//返回的city对象。根据city.属性名来获取数据
var option = $("<option></option>").text(proviences[i]);
//生成value属性
option.attr("value",proviences[i]);
//将option添加到select标签中
$("#province").append(option);
}
}
})
})
function changeCity() {
//获取选中的省份的名字
var pName = $("#province").val();
alert("省份名字==》"+pName)
$.ajax({
type:"GET",
url:"http://localhost:80/city",
data:{"pName":pName},
success:function (cities) {
//清空城市的下拉框,这串代码就是替换select标签中内容
$("#city").html("<option value=''>-- 请选择市 --</option>")
//清空区的下拉框
$("#district").html("<option value=''>-- 请选择县(区) --</option>")
for(var i = 0;i < cities.length;i++){
var option = $("<option></option>").text(cities[i]);
//生成value属性
option.attr("value",cities[i]);
//将option添加到select标签中
$("#city").append(option);
}
}
})
}
在实际的应用中我们是将ajax封装到jq的 function函数中的;我们需要面对的就是对函数的调用,那么我们改如何来调用呢?jQuery事件有两种主流的写法,
1、找到标签,使用click,change等方法编写
2、在标签中使用onchange,onclick(普通标签调用) onload(加载的页面使用用在body标签)等属性调用方法
在这里有一个前提如果没有使用jquery,那么第一种方式就无法使用,因为cclick,change等方法是jquery的。
在页面加载时需要执行的jq函数我们还可以使用以下这种方法
"$(function(){
//调用的方法名
})
案列的第一个函数就是在页面加载时自主加载;案例的第二个函数就是通过调用进行加载的。
宋姐(总结)
这就是简单的介绍;里面还有很多不足希望各位看友能多多评论与指正;我们互相学习。