在jQuery中,封装了两种方式也提供了对Ajax的支持:
- 底层实现
- 高级实现
一、Ajax底层实现
jQuery.ajax(options) 或 $.ajax(options)
这个方法比较简单,只有一个options参数,要求是一个json格式的数据
options常用参数解析:
参数 | 说明 |
async | 是否异步,true:异步,false:同步,默认为true |
cache | 是否缓存,(IE下的get请求才有缓存问题),true:缓存,false不缓存,默认为true |
complete | 当Ajax的状态码为4时所触发的回调函数 |
contentType | 设置请求头 |
data | 发送Ajax时所传递的参数,要求是一个字符串格式的数据 |
dataType | 期待的返回值类型,text/xml/json |
success | 当Ajax状态码为4且响应状态码为200时所触发的回调函数 |
type | 发送的http类型,get/post |
url | 请求的url地址 |
实现get请求
$(function(){ $('#btn').bind('click',function(){ $.ajax({ type:'get', cache:false, // 解决Ajax在IE下get请求中的缓存问题 url:'ajax.php', success:function(msg){ alert(msg); } }) }) });
<input type="button" id="btn" value="获取数据">
实现post请求
$(function(){ $('#btn').bind('click',function(){ var username = $('#username').val(); $.ajax({ type:'post', url:'ajax.php', data:'username='+username, success:function(msg){ alert(msg); } }) }) });
<input type="text" id="username"> <input type="button" id="btn" value="获取数据">
二、Ajax高级实现
jQuery.get(url,[data],[callback],tye) 或 $.get() :发送Ajax中的get请求
jQuery.post(url,[data],[callback],type) 或 $.post() :发送Ajax中的post请求
参数 | 说明 |
url | 请求的url地址 |
data | 发送Ajax请求时传递的参数,要求是一个字符串或json格式的数据 |
callback | 当Ajax状态码为4且响应状态码为200时,所触发的回调程序 |
type | 期待的返回值类型,text/xml/json,默认就是text |
实现get请求
$(function(){ $('#btn').bind('click',function(){ $.get('ajax.php',function(msg){ alert(msg); }) }) });
运行后发现,虽然是ajax的高级实现,但是依然会执行缓存,可以通过如下方式解决:
$(function(){ $('#btn').bind('click',function(){ var data = { _:new Date().getTime() // 使用时间戳解决Ajax缓存 }; $.get('ajax.php',data,function(msg){ alert(msg); }) }) });
实现post请求返回xml格式数据
$(function(){ $('#btn').bind('click',function(){ // 接收参数 var first = $('#first').val(); var second = $('#second').val(); var data = { first:first, second:second }; $.post('ajax.php',data,function(msg){ var jia = $(msg).find('jia').text(); var jian = $(msg).find('jian').text(); var cheng = $(msg).find('cheng').text(); var chu = $(msg).find('chu').text(); alert(jia+'->'+jian+'->'+cheng+'->'+chu); },'xml'); }) }); 第一个数:<input type="text" id="first"> 第二个数:<input type="text" id="second"> <input type="button" id="btn" value="四则运算">
ajax.php
$first = $_POST['first']; $second = $_POST['second']; $jia = $first + $second; $jian = $first - $second; $cheng = $first * $second; $chu = $first / $second; $str = <<<EOT <root> <jia>$jia</jia> <jian>$jian</jian> <cheng>$cheng</cheng> <chu>$chu</chu> </root> EOT; header('Content-type:text/xml; charset=utf-8'); echo $str;
实现post请求返回jason格式数据
$(function(){ $('#btn').bind('click',function(){ $.post('ajax.php',function(msg){ // 第一种遍历输出方式 for(var i=0;i<msg.length;i++){ alert(msg[i].name); } // 第二种遍历输出方式 $(msg).each(function(i,item){ alert(item.name); }) },'json'); }) }); <input type="button" id="btn" value="获取数据">
ajax.php
mysql_connect('localhost','root','123'); mysql_select_db('go'); mysql_query('set names utf8'); $sql = "select cid,name,url from go_navigation"; $res = mysql_query($sql); $data = array(); while ($row = mysql_fetch_assoc($res)) { $data[] = $row; } echo json_encode($data);