面前的说话

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

 

相关文章

网站地图xml地图