zoukankan      html  css  js  c++  java
  • jQuery中的Ajax使用方法

    在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);
  • 相关阅读:
    odoo 的各种domain
    odoo search之时间搜索,时间段查询
    git 修改远程仓库地址
    Windows 挂起进程
    结构体 偏移量 (size_t)&(((s *)0)->m) , list相关
    Data Flow Diagram with Examples
    Windows环境,获取当前线程的ID,GetCurrentThreadId
    获取 保存 系统信息 [Windows]
    notepad正则删除关键词所在行
    文件或文件夹改变后,发信号让系统刷新
  • 原文地址:https://www.cnblogs.com/chenjiacheng/p/6522296.html
Copyright © 2011-2022 走看看