Ajax深远理解ajax连串第拾篇——jQuery中的ajax

前方的话

  jQuery提供了有的一般开支中须求的高速操作,例如load、ajax、get和post等,使用jQuery开发ajax将变得最为简约。那样开发人士就足以将先后支付集中在业务和用户体验上,而不需求理会那么繁琐的XMLHTTPRequest对象。jQuery对ajax操作举办了包装,在jQuery中$.ajax()属性最尾部的主意,第二层是load()、$.get()和$.post()方法,第2层是$.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成分

  回调函数有一个参数,分别表示呼吁再次回到的始末、请求状态和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()方法应用2个HTTP GET请求从服务器加载JSON编码的数码

【调用格式】

  getJSON()方法的调用格式如下。在这之中,url参数为呼吁加载json格式文件的服务器地址,可选项data参数为呼吁时发送的数码,callback参数为多少请求成功后,执行的回调函数

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

  getJSON()方法也等于以下ajax()方法的缩写

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

【回调函数】

  回调函数中的第3个参数表示回去的多少

$.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表示贰个富含发送请求的UCR-VL字符串;data表示发送给服务器的字符串或Key/value键值对;success(data,
textStatus,
jqXH奥迪Q5)表示当呼吁成功后进行的回调函数;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数据会作为查询字符串最后附加到U中华VL中

<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 '奇数';
}
?>

Ajax 1

 

post()

  post()方法应用2个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 '奇数';
}
?>

Ajax 2

  post()方法和get()方法的构造和应用办法都同一。但要注意的是,当load()方法包涵数据参数字传送递时,会动用POST方式发送请求

 

序列化

  当贰个表单中字段较多,表单成分较复杂时,就需求一种办法来简化提取表单内部控件的值的操作,这一行为日常叫连串化,jQuery提供了param()、serialize()和serialzeArray()那四个章程

【param()】

  param(obj)方法用来创设3个数组或对象种类化的字符串,适用于二个U奥迪Q5L地址询问字符串或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 '奇数';
}
?>

 

相关文章