在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);

版权声明：本文为chenjiacheng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/chenjiacheng/p/6522296.html