深深明ajax系列第九首——jQuery中的ajax

面前的言语

  jQuery提供了有的一般性支付被需的短平快操作,例如load、ajax、get和post等,使用jQuery开发ajax将转移得最简单。这样开发人员就足以用顺序支付集中在业务以及用户体验及,而休需要理会那么繁琐的XMLHTTPRequest对象。jQuery对ajax操作进行了包装,在jQuery中$.ajax()属性最底部的道,第2层是load()、$.get()和$.post()方法,第3叠是$.getScript()和$.getJSON()方法。下面将详细介绍jQuery中的ajax

 

load()

  load()方法是jQuery中最好简便易行和常用之ajax方法,使用load()方法通过ajax请求加载服务器受到之数,并将返回的数目放置到指定的因素被

【调用格式】

  load()方法的调用格式为如下所示,参数url为加载服务器地址,可选取项data参数为呼吁时发送的多少,callback参数为数请求成功后,执行之回调函数

load(url,[data],[callback])

【载入HTML文档】

$('#result').load('ajax/test.html');

  [注意]假如选择器没有匹配的元素,如document不含有id=”result”的素,这个Ajax请求将非会见于发送出

<!-- 当前页面-->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style>
h6{margin:4px;}
p{margin: 0;}
</style>

<body>
<input type="button" id="send" value="ajax获取">   
<div class="comment">已有评论:</div>
<div id="resText"></div>
<script>
$(function(){
    $('#send').click(function(){
        $('#resText').load('ajaxjQueryLoad.html')
    })
})
</script>

<!-- 要载入的页面 -->
<div class="comment">
    <h6>张三:</h6>
    <p class="para">沙发.</p>
</div>
<div class="comment">
    <h6>李四:</h6>
    <p class="para">板凳.</p>
</div>
<div class="comment">
    <h6>王五:</h6>
    <p class="para">地板.</p>
</div>

【部分载入】

  如果url参数的字符串中蕴含一个或多个空格,那么首先单空格后面的情节,会于算是jQuery的选择器,从而控制应该加载返回结果丁的呀有情

$('#result').load('ajax/test.html #container');

  当这种方法执行,
它将检索ajax/test.html返回的页面内容,jQuery会获取ID为container元素的情,并且插入到ID为result元素,而其他不被搜寻到之要素将受废弃

$(function(){
    $('#send').click(function(){
        $('#resText').load('ajaxjQueryLoad.html .para')
    })
})

【传递方式】

  load()方法默认使用GET方式,如果data参数提供一个目标,那么以POST方式

//无参数传递,则是GET方式
$('#resText').load('tset.php')

//有参数传递,则是POST方式
 $('#resText').load('tset.php',{name:'rain',age:'22'})

【回调函数】

  如果提供了”complete”回调函数,它以于函数处理完后,并且HTML已经给插入了经常叫调用。回调函数会当每个匹配的素上为调用一浅,并且this始终对准当前方处理的DOM元素

  回调函数有3单参数,分别代表要返回的情、请求状态和XMLHTTPRequest对象

$('#result').load('ajax/test.html',function(responseText,textStatus,XMLHTTPRequest) {
  //responseText :请求返回的内容
  //testStatus: success、error、notmodified、timeout四种
  //XMLHTTPRequest: XMLHTTPRequest对象
});

<style>
h6{margin:4px;}
p{margin: 0;}
#test{border:1px solid black;}
</style>

<input type="button" id="send" value="ajax获取">   
<div class="comment">已有评论:</div>
<div id="resText"></div>
<div id="test"></div>
<script>
$(function(){
    $('#send').click(function(){
        $('#resText').load('ajaxjQueryLoad.html .para',function(a,b,c){
            $('#test').html('responseText:' + a + '<br>textStatus:' + b + '<br>XMLHTTPRequest:' + c);
        })
    })
})
</script>

 

getJSON()

  getJSON()方法以一个HTTP GET请求于服务器加载JSON编码的多寡

【调用格式】

  getJSON()方法的调用格式如下。其中,url参数为呼吁加载json格式文件的服务器地址,可摘项data参数为请时发送的数量,callback参数为数要成功后,执行的回调函数

$.getJSON(url,[data],[callback])

  getJSON()方法相当给以下ajax()方法的缩写

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

【回调函数】

  回调函数中之首先单参数表示回去的数

$.getJSON('test.json',function(data){
    //data :返回的数据
})

  一般地,使用each()方法,来构建DOM结构

<input id="btnShow" type="button" value="加载" />
<div id="result"></div>
<script>
$('#btnShow').click(function(){
    var $this = $(this);
    var $html = '';
    $.getJSON('sport.json',function(data){
        $this.attr('disabled','true');
        $.each(data,function(index,sport){
            $html += '<div>' + sport["name"] + '</div>';
        });
        $('#result').html($html);
    })
})
</script>

  json文件如下

[{ 
  "name": "足球"
},{ 
  "name": "散步"
},{ 
  "name": "篮球"
},{ 
  "name": "乒乓球"
},{ 
  "name": "骑自行车"
}]

 

getScript()

  getScript()方法应用一个HTTP
GET请求从服务器加载并推行一个javascript文件

  getScript()方法调用格式如下,参数url为服务器请求地址,可摘项callback参数为请成功后实行的回调函数

$.getScript(url,[callback])

  相当给一个Ajax函数的缩写

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

<input id="btnShow" type="button" value="加载" />
<div id="result"></div>
<script>
$('#btnShow').click(function(){
    var $this = $(this);
    $.getScript('sport.js',function(){
        $this.attr('disabled','true');
        $('#result').html($html);
    })
})
</script>

  js文件如下

var data = [{
    "name": "足球"
}, {
    "name": "散步"
}, {
    "name": "篮球"
}, {
    "name": "乒乓球"
}, {
    "name": "骑自行车"
}];
var $html = '';
$.each(data, function (index, sport) {
     $html += "<div>" + sport["name"] + "</div>";
});

 

get()

  get()方法运用一个HTTP GET请求于服务器加载数据

【调用格式】

  get()方法的调用格式如下所示,url表示一个带有发送请求的URL字符串;data表示发送给服务器的字符串或Key/value键值对;success(data,
textStatus,
jqXHR)表示当求成功后执行的回调函数;dataType表示于服务器返回的料想的数据类型。默认:智能猜测(xml,
json, script, 或 html)

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

  相当给一个ajax功能的缩写

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

【使用参数】

  通过get()方法发送给服务器的key/value数据会作为查询字符串最终附加到URL中

<form action="#" id="form1">
    <p>评论:</p>
    <p>姓名:<input type="text" name="username" id="username"></p>
    <p>内容:<textarea  name="content" id="content" rows="2" cols="20"></textarea></p>
    <p><input type="button" id="send" value="提交"></p>
</form>
<div class="comment">已有评论:
    <div id="resText"></div>
</div>
<script>
$('#send').click(function(){
    $.get('jqGet.php',{
        username:$('#username').val(),
        content:$('#content').val()
    },function(data){
        //
    })
})
</script>

【回调函数】

function(data,textStatus){
    //data: 返回的内容,可能是XML、JSON、HTML、JS
    //textStatus: success、error、notmodified、timeout四种
}

【数据格式】

  1、HTML片段

function(data,textStatus){
    $('#resText').html(data);
}

  2、XML文档

function(data,textStatus){
    var username = $(data).find('comment').attr('username');
    var content = $(data).find('comment content').text();
    var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
    $('#resText').html(txtHtml);
}

  3、JSON 

function(data,textStatus){
    var username = data.username;
    var content =  data.content;
    var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
    $('#resText').html(txtHtml);
}

<!-- 前端页面 -->
<select id="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$('#send').click(function(){
    $.get('jqRequest.php',{
        num: $('#num').val()
    },function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '是' + data)
    })
})
</script>

<!-- 后端页面 -->
<?php 
$num = $_REQUEST['num'];
if($num % 2 == 0){
    echo '偶数';
}else{
    echo '奇数';
}
?>

图片 1

 

post()

  post()方法以一个HTTP POST 请求于服务器加载数据

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

  相当给一个 Ajax 函数的简写形式

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

<!-- 前端页面 -->
<select id="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$('#send').click(function(){
    $.post('jqRequest.php',{
        num: $('#num').val()
    },function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '是' + data)
    })
})
</script>

<!-- 后端页面 -->
<?php 
$num = $_REQUEST['num'];
if($num % 2 == 0){
    echo '偶数';
}else{
    echo '奇数';
}
?>

图片 2

  post()方法和get()方法的构造与采用方法还相同。但只要顾的是,当load()方法包含数据参数传递时,会采取POST方式发送请求

 

序列化

  当一个表单中字段较多,表单元素较复杂时,就需平等栽方法来简化提取表单中控件的价的操作,这无异于行也普通被序列化,jQuery提供了param()、serialize()和serialzeArray()这三独点子

【param()】

  param(obj)方法用来创造一个数组或对象序列化的字符串,适用于一个URL地址询问字符串或Ajax请求

console.log($.param({ width:1680, height:1050 }));//'width=1680&height=1050'

【serialize()】

  serialize()方法以作提交的表单元素的值编译成字符串

  [注意]serialize()方法的一个外加利益是会见自动对键值对儿中的特殊字符进行编码

<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <br />
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
  <br/>
  <input type="checkbox" name="check" value="check1" id="ch1"/>

  <label for="ch1">check1</label>

  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>

  <label for="ch2">check2</label>
  <br />
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>

  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2"/>

  <label for="r2">radio2</label>
</form>
<p><tt id="results"></tt></p>
<script>
    function showValues() {
      $("#results").text($("form").serialize());
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
</script>

【serializeArray()】

  serializeArray()方法将用作提交的表单元素的值编译成拥有name和value对象成的高频组,即json格式的数量。例如[
{ name: a value: 1 }, { name: b value: 2 },…]

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>
<script>
$('form').submit(function() {
  console.log($(this).serializeArray());
  return false;
});
</script>

  结果如下 

[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  },
  {
    name: "d",
    value: "4"
  },
  {
    name: "e",
    value: "5"
  }
]

  该对象好采用each()函数对数码进行迭代输出

$dataArr = $('form').serializeArray();
$html = '';
$.each($dataArr,function(i,data){
    $html += data.name + ':' + data.value + ';';
})
console.log($html);//a:1;b:2;c:3;d:4;e:5;

 

ajax()

  前面介绍的load()、get()、post()、getScript()、getJSON()等艺术都是冲ajax()方法实现之

  ajax()方法是无比底部、功能最好精的请服务器数据的计,它不仅可博服务器返回的数目,还能够通往服务器发送请求并传递数值,它的调用格式如下:

$.ajax([settings])

  其中参数settings为发送ajax请求时的安排对象,在拖欠目标吃,url表示服务器请求的不二法门,data也求时传递的多寡,dataType为服务器返回的数据类型,success为呼吁成功的实践之回调函数,type为发送数据请求的不二法门,默认为get  

  常用参数如下所示

名称                         值/描述
async                       布尔值,表示请求是否异步处理。默认是 true。
beforeSend(xhr)             发送请求前运行的函数。
cache                       布尔值,表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)        请求完成时运行的函数(在请求成功或失败之后均调用,即在success和error函数之后)
contentType                 发送数据时使用的内容类型。默认是"application/x-www-form-urlencoded"
context                     为所有 AJAX 相关的回调函数规定 "this" 值。
data                        规定要发送到服务器的数据。
dataFilter(data,type)       用于处理 XMLHttpRequest 原始响应数据的函数。
dataType                    预期的服务器响应的数据类型。
error(xhr,status,error)     如果请求失败要运行的函数。
global                      布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified                  布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp                       在一个 jsonp 中重写回调函数的字符串。
jsonpCallback               在一个 jsonp 中规定回调函数的名称。
password                    规定在 HTTP 访问认证请求中使用的密码。
processData                 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset               规定请求的字符集。
success(result,status,xhr)  当请求成功时运行的函数。
timeout                     设置本地的请求超时时间(以毫秒计)。
traditional                 布尔值,规定是否使用参数序列化的传统样式。
type                        规定请求的类型(GET 或 POST)。
url                         规定发送请求的 URL。默认是当前页面。
username                    规定在 HTTP 访问认证请求中使用的用户名。
xhr                         用于创建 XMLHttpRequest 对象的函数。

<!-- 前端页面 -->
<select id="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$('#send').click(function(){
    $.ajax({
      url:'jqRequest.php',
      type:'POST',
      data:{
        num:$('#num').val()
      },
      success:function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '是' + data);
      }
    })
})
</script> 

<!-- 后端页面 -->
<?php 
$num = $_REQUEST['num'];
if($num % 2 == 0){
    echo '偶数';
}else{
    echo '奇数';
}
?>

全局事件

  jQuery简化ajax操作不仅体现于调用ajax方法以及拍卖应方面,而且还反映于对调用ajax方法的过程遭到之HTTP请求的主宰。通过jQuery提供的组成部分自定义全局函数,能够为各种与ajax相关的事件注册回调函数。例如,当ajax请求开始经常,会触发ajaxStart()方法的回调函数;当ajax请求了时,会触发ajaxStop()的回调函数。这些主意还是全局的法,因此无论是创建它们的代码位于何处,只要有ajax请求发生,就会触发它们

【ajaxSetup()】

  ajaxSetup()方法吗以后如果为此到之Ajax请求设置默认的值,设置完成后,后面的Ajax请求将无待更补充加这些选择项值,它的调用格式为:

$.ajaxSetup([options])

  例如,设置 AJAX 请求默认地址为 “/xmlhttp/”,用 POST 代替默认 GET
方法。其后之 AJAX 请求不再设置任何选择参数

$.ajaxSetup({
   url: "/xmlhttp/",
   type: "POST"

});
$.ajax({ data: myData });

  如果想吃有ajax请求不为ajaxSetup()方法的影响,可以于使ajax()方法时,将参数中之global设置也false

$.ajaxSetup({
   url: "/xmlhttp/",
   type: "POST"

});
$.ajax({
  global:false,
  url:"test",
  type:'GET'
})

【ajaxStart()和ajaxStop()】

  ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为

$(selector).ajaxStart(function())
$(selector).ajaxStop(function())

  [注意]于 jQuery 1.8 开始, ajaxStart()和ajaxStop()方法才能够绑定到
document元素

  例如,读取远程网站的图纸速度可能会见较慢,如果当加载的进程遭到,不吃用户提供部分提醒和举报信息,很爱为用户误认为按钮单击无用,使用户对网站去信心。这时,ajaxStart()和ajaxStop()方法就是派上用场了

<!-- 前端页面 -->
<select id="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$(document).ajaxStart(function(){
    $('#test').show()
}).ajaxStop(function(){
    $('#test').hide();
});
$('#send').click(function(){
    $.ajax({
      url:'jqRequest.php',
      type:'POST',
      data:{
        num:$('#num').val()
      },
      success:function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '是' + data);
      }
    })
})
</script> 

<!-- 后端页面 -->
<?php 
$num = $_REQUEST['num'];
if($num % 2 == 0){
    echo '偶数';
}else{
    echo '奇数';
}
?>

 

相关文章