jQuery入门--2

• JQuery中的AJAX

  • load

    //通过load加载本地文件$("#div1").load("index.jsp");

  • get

    //地址，回调$.get(URL,callback);$.get("${pageContext.request.contextPath}/servlet/AJaxServlet?username=zhangsan",function(data, status) {        alert(data + "----" + status);});

  • post
    //地址，参数，回调
    $.post(URL,data,callback);

    $.post("${pageContext.request.contextPath}/servlet/AJaxServlet", {    username : "zhangsan",    password : 123},function(data, status) {    alert(data + "----" + status);});

  • ajax
    $.ajax({name:value, name:value, … })

JQuery案例

• 案例一：

  验证用户名是否存在

• 案例二:

  ajax提交表单

      javascript] view plain copy        $.ajax({                  type: "POST",                  url:"SearchInfo/QueryMoreInfo",                  data:$('#fm').serialize(),// 序列化表单值                  async: false,                  error: function(request) {                      alert("Connection error");                  },                  success: function(data) {                      window.location.href="跳转页面"                  }           });  

• 案例三：

  三级联动效果

• js中json

  JSON字符串:var str1 = '{ "name": "cxh", "sex": "man" }';JSON对象:var str2 = { "name": "cxh", "sex": "man" };JSON对象var s = {    "name" : "Jack",    "age" : 30,    "isMan" : true,    "school" : {        "name" : "Lonton University",        "location" : "English"    }};alert(s.school.name);JSON字符串转换为JSON对象var m = '{"username" : "zhangsan","password" : "lisi"}';var mobject=eval("("+m+")");jquery中将json字符串转换成对象alert($.parseJSON(str1));JSON对象转换成JSON字符串（需要导入json.js包）var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

• 案例

• JQuery实现三级联动:

  -请选择- -请选择- -请选择-

  <input  type="submit" />

  //1--先将省加载进来$(function() {    $.ajax({        type : "POST",        url : "${pageContext.request.contextPath }/user_province.action",        dataType : "json",        success : function(data) {            //alert(data);            //1--获取pro选择框            $("#proId").html("<option value=0>-请选择-</option>");            //2-遍历data，设置pro展示的城市            $.each(data, function() {                $("#proId").append(                        "<option value=" + this.provinceid + ">"                                + this.name + "</option>");            });        }    });$("#proId").change(function(){$.ajax({    type : "POST",    url : "${pageContext.request.contextPath }/user_city.action",    //data 根据省的id 获取城市      data:"pid="+$(this).val(),    dataType : "json",    success : function(data) {        //alert(data);        //1--获取pro选择框        $("#cityId").html("<option value=0>-请选择-</option>");        //2-遍历data，设置pro展示的城市        $.each(data, function() {            $("#cityId").append(                    "<option value=" + this.cityid + ">"                            + this.name + "</option>");        });    }});});$("#cityId").change(function(){$.ajax({    type : "POST",    url : "${pageContext.request.contextPath }/user_xcity.action",    //data 根据省的id 获取城市      data:"cid="+$(this).val(),    dataType : "json",    success : function(data) {        //alert(data);        //1--获取pro选择框        $("#xcityId").html("<option value=0>-请选择-</option>");        //2-遍历data，设置pro展示的城市        $.each(data, function() {            $("#xcityId").append(                    "<option value=" + this.xcityid + ">"                            + this.name + "</option>");        });    }});});});