Jquery_Ajax

1、快捷方法

• (1) $.load()

  $(parent).load( url [, data] [, callback]);

  • 请求一个HTML页面，并替换为parent的innerHTML
  • url : 请求HTML页面的URL
  • data ： 可选，发送至服务器的数据
  • callback ： 可选，请求完成时的回调，无论成功失败
  • 示例：$(‘body’).load(‘data/test.html’);

• (2)$.get()

  $.get( url [, data] [, callback] [, type]);

  • get方式请求指定的url。
  • url : 请求的URL
  • data ： 可选，发送至服务器的数据
  • callback ： 可选，请求成功时的回调
  • type ： 可选，参照$.ajax参数中的type，默认：智能猜测（xml, json, script, 或 html）

示例：

$('#btn2').click(function() {        var name = $('#uname').val();        var pwd = $('#upass').val();        var strUrl = 'GetServlet?uname='+name+'&upass='+pwd;        $.get(strUrl, function(data) {            console.log(data);            var obj = JSON.parse(data);//将字符转成JSON对象            $('#box').html('<h1>'+obj.uname+'</h1>');        });    });

• (3)$.post()

  $.post与$.get相同，唯一的不同就是请求是以post方式进行。

示例：

//post、参数以JSON格式传输    $('#btn4').click(function() {        var name = $('#uname').val();        var pwd = $('#upass').val();        var params = {"uname":name,"upass":pwd};        $.post('GetServlet', params,function(data) {            var obj = JSON.parse(data);//将字符转成JSON对象            $('#box').html('<h1>'+obj.uname+'</h1>');        });    });

• （4）$.getJSON()

  $.getJSON(url [, callback]);

• 加载一段JSON并解析
  示例：

  //getJson    $('#btn3').click(function() {        var name = $('#uname').val();        var pwd = $('#upass').val();        var strUrl = 'GetServlet?uname='+name+'&upass='+pwd;        $.getJSON(strUrl, function(data) {            //var obj = JSON.parse(data);//将字符转成JSON对象            $('#box').html('<h1>'+data.uname+'</h1>');        });    });

• （5）$.getScript()

  $.getScript(url [, callback]);

  • 加载一段JS并执行
  • 示例：$.getScript(‘data/test.js’);

• （6）底层接口：$.ajax()

  • 1、url String 发送请求的url
  • 2、type String “get”或”post”
  • 3、success function 请求成功后的回掉函数
  • 4、data String或object 要发送给服务器的数据。
    示例：”name=abc&age=19” {name:”abc”,age:19}
  • 5、timeout number 超时时间
  • 6、datatype String 服务器返回的数据类型。特殊的格式JQ会进行预解析和兼容性修复。可选择的值：”xml” , “html” , “script” , “json” , “jsonp”,”text”

  • 7、beforeSend function 在发送请求前，可以添加自定义头部信息等操作。示例：

    function(xhr){    xhr;//XMLHttpRequest对象}

  • 8、complete function ajax请求完成后的回调函数，无论成功与失败。

  • 9、error function 失败的回调函数

  • 10、global boolean 是否触发全局的AJAX事件
    示例：

    //ajax    $('#btn5').click(function() {        var name = $('#uname').val();        var pwd = $('#upass').val();        //fromdata 表单数据对象        var fd = new FormData();        fd.append('uname',name);        fd.append('upass',pwd);        fd.append('image',document.getElementById('img').files[0]);//添加文件到表单数据        $.ajax({            url: 'AjaxServlet',            type: 'post',            //dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',            data: fd,            processData:false,//表示不做数据处理            contentType:false,//数据类型不做指定            success:function(data){                console.log(data);            }        });            });

• (7)表单序列化

  • $(dom).serialize()
  • 将一个form表单内的所有数据转换为可以发送给服务器的字符串