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>");
          });
      }
  });
  });
  });