javaweb实训第二天上午——jQuery笔记(3）

<script type="text/javascript">
//1.创建json对象
var person = {"name":"王天霸","age":22,"dept":{"id":1,"name":"开发部"}};
console.debug(person);
console.debug(person.name,person.age,person.dept,person.dept.id,person.dept.name);
//2.创建JSON数组
var persons = [
{"name":"王天霸","age":22,"dept":{"id":1,"name":"开发部"}},
{"name":"西门吹雪","age":23,"dept":{"id":2,"name":"公关部"}}
]
console.debug(persons);
console.debug(persons[1].name,persons[1].dept.name);
//注意：标准json格式，key 都是""引起来的，如果你的value是字符串，必须用引号引起来
</script>

<script type="text/javascript">
/*JSON字符串转JSON对象有3种方式：
1.使用eval转          eval("("+jsonStr+")");    你的json字符串不是标准的我也能转
2.使用JSON.parse(jsonStr);       我只能转标准的json字符串
3.使用jquery的方式转        $.parseJSON(jsonStr);  它是基于第二种的实现，只能转标准的json字符串
(推荐使用它)
何为标准json字符串呢？答： key必须用"" 引起来       value只要是字符串，必须用""引起来*/
var jsonStr = '{name:"王天霸","age":22}';
console.debug(jsonStr);
var jsonObj = eval("("+jsonStr+")");
console.debug(jsonObj);
jsonObj = JSON.parse(jsonStr);
console.debug(jsonObj);
jsonObj = $.parseJSON(jsonStr);
console.debug(jsonObj);
</script>

省份:<select id="province">
<option value="-1">请选择</option>
</select>
市: <select id="city">
<option value="-1">请选择</option>
</select>

<script type="text/javascript">
/*jQuery的ajax请求语法格式：
   $.get(url,[param],[callback],[dataType])
url: 访问后台的url地址
param: 请求参数    是以json对象传递参数的
callback：回调函数，后台相应的数据都是放到回调函数中的
dataType: 后台返回的数据格式
  xml, html, script, json, text, _default。(默认返回的格式就是JSON对象)*/
 $(function(){
 function loadProvince(){//1.提供加载省份的函数
 $.get("/city/getProvince",function(result){
 /* result:后台响应过来的数据 */ //循环迭代所有的省份
  $.each(result,function(i,o){
  $("#province").append("<option value='"+o.id+"'>"+o.name+"</option>");
  });
 });
 }
loadProvince(); //2.调用省份的方法
$("#province").on("change",function(){//3.当省份的值发生改变的时候，我就触发该函数
 var provinceId = $(this).val(); //获取省份id  this:代表是当前下拉列表的dom节点
   $("#city").empty();//5.先清空下拉列表
   if(provinceId==-1){//6.代表是请选择
   $("#city").append("<option value='-1'>请选择</option>");
   return;//结束程序
   }
 //4.根据省份id 发送Ajax获取市
   var param = {"provinceId":provinceId};
   $.get("/city/getCitysByProvinceId",param,function(result){//通过省份id获取对应的市
  $.each(result,function(i,o){//循环迭代所有的市
  $("#city").append("<option value='"+o.id+"'>"+o.name+"</option>");
  })
   });
 });
 })
</script>