jquery-ajax

1. 选项卡

//给.title里面的所有li注册点击事件$('.title li').click(function(){//this是触发当前事件的dom对象，要将它转为jquery对象，因为我们要用jquery的方法//addClass()方法，用于添加样式//removeClass()方法，用于移除样式//siblings()方法，返回所有同级的兄弟元素，该方法可以传选择器，用于精确查找$(this).addClass('active').siblings('.active').removeClass('active')//index()方法，返回当前元素的索引//eq()方法，是根据索引返回指定的元素$('.list li').eq($(this).index()).show().siblings().hide()})

2. get&post

//get请求$.get('http://www.bingjs.com:81/Subject/GetAll',function(res){console.log(res);})//get请求，需要传参数$.get('http://www.bingjs.com:81/Subject/GetSubjectsByGrade',{gradeId:1},function(res){console.log(res);})//post请求$.post('http://www.bingjs.com:81/Subject/Add',{subjectName:'语文',classHour:100,gradeId:1},function(res){console.log(res);})

3. 制作导航条

//$('<标签名/>') 是jquery创建标签的方式//html()方法 ==> js中的innerHTML属性//text()方法 ==> js中的innerText属性//append()方法 ==> js中的appendChild()方法//加载菜单的方法functionloadMenu(){//ajax请求一个本地的json文件$.get('./data/menu.json',res=>{res.data.forEach(r=>{//创建一个li标签letli=$('<li/>').text(r.name)//将li标签追加到#nav中$('#nav').append(li)})})}loadMenu();

4. 三级菜单

//定义一个省份数组letprovinces=[]//加载数据的方法functionloadData(){$.get('./data/city.json',res=>{//先从原始数据中获取所有的省份信息provinces=res.filter(r=>r.pid===0)//循环省份数组provinces.forEach(p=>{//给每个省份对象，添加一个城市数组p.citys=res.filter(r=>r.pid===p.id)//循环每个省份里面的城市数组p.citys.forEach(c=>{//给每个城市对象，添加一个区县数组c.districts=res.filter(r=>r.pid===c.id)})})//调用显示数据的方法showData();})}//显示数据的方法functionshowData(){//循环出所有的省份信息provinces.forEach(p=>{//创建省份divletprovince=$('<div class="province"/>')lettitle=$('<div class="title"/>').html(p.name)province.append(title)letcity=$('<ul class="city"/>')province.append(city)//循环出每个省份的城市信息p.citys.forEach(c=>{letli=$('<li/>').html(c.name)city.append(li)letdistrict=$('<ul class="district"/>')li.append(district)//循环出每个城市的区县信息c.districts.forEach(d=>{letli2=$('<li/>').html(d.name)district.append(li2)})})//将省份div添加到menu中$('#menu').append(province)})}//调用加载数据的方法loadData();

5. 下拉框省市联动效果

//attr()方法，用于设置属性 和 获取属性 //attr()方法，传两个参数，表示设置指定的属性，传一个参数，表示获取指定属性的值//类似于js里面的setAttribute()方法 和 getArrtibute()方法letdata=null//定义一个变量，用于备份数据//获取省份信息的方法functiongetProvince(){$.get('./data/city.json',res=>{data=res//备份获取的全部数据//获取所有省份数据res.filter(r=>r.pid===0).forEach(r=>{//每个省份信息，创建一个option标签letoption=$('<option/>').html(r.name).attr('value',r.id)$('#province').append(option)})})}getProvince()//val()方法 用于获取表单元素的值 ==> js里面的value属性//remove()方法，用于删除自己//empty()方法，用于清空子元素//结构伪类选择器//:gt(i) 表示大于指定的索引//:lt(i) 表示小于指定的索引//:eq(i) 表示等于指定的索引//:not(选择器) 表示排除指定的选择器//给省份下拉框注册一个选项改变后事件，就是js里面的onchange$('#province').change(function(){//清空城市下拉框里面的数据// $('#city option:gt(0)').remove()$('#city option:not(:eq(0))').remove()//清空区县下拉框里面的数据$('#district option:gt(0)').remove()//获取省份的idletpid=parseInt($(this).val())if(pid>0){//根据该省份id，获取对应的城市信息data.filter(r=>r.pid===pid).forEach(r=>{//每个城市信息，创建一个option标签letoption=$('<option/>').html(r.name).attr('value',r.id)$('#city').append(option)})}})//给城市下拉框注册一个选项改变后事件$('#city').change(function(){//清空区县下拉框里面的数据$('#district option:gt(0)').remove()//获取城市的idletcid=parseInt($(this).val())//根据该城市id，获取对应的区县信息data.filter(r=>r.pid===cid).forEach(r=>{//每个区县信息，创建一个option标签letoption=$('<option/>').html(r.name).attr('value',r.id)$('#district').append(option)})})

6.ajax

专门用于发送get请求的方法

$.get('',{},function(res){},’json’)

专门用于发送post请求的方法

$.post('',{},function(res){},’json’)

ajax：既可以发送get请求，也可以发送post请求

$.ajax({url:'http://www.bingjs.com:81/Grade/GetAll',//设置请求地址type:'GET',//设置请求类型（GET/POST）默认值是：GETdata:{},//设置请求参数数据dataType:'json',//服务器返回的数据类型async:true,//true表示异步请求（默认值），false表示同步请求beforeSend:function(xhr){//发送请求前的回调函数console.log(xhr);console.log('即将发送请求....');},success:function(data,textStatus,xhr){//请求成功后的回调函数console.log('请求成功');console.log(data);console.log(textStatus);console.log(xhr);data.forEach(r=>{letoption=$('<option/>').html(r.GradeName).attr('value',r.GradeId)$('#grade').append(option)})},error:function(xhr,textStatus,errorThrown){//请求失败后的回调函数console.log('请求失败');console.log(xhr);console.log(textStatus);console.log(errorThrown);},complete:function(xhr,ts){//请求完成后的回调函数console.log(xhr);console.log(ts);console.log('请求已完成....');}})