jQuery ajax 异步请求

jQuery - AJAX 简介



AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

什么是 AJAX?

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

如果没有 jQuery,AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。

jQuery对ajax的支持

$(json_arr).each()

方法1:jQuery遍历json数组

// 语法
$(json_arr).each(function(index, obj){
    index:遍历出来的元素的下标;
    obj:遍历出来的元素;
});

$.each(json_arr, function(i, obj)

方法2:jQuery遍历json数组

//利用全局数组
$.each(json_arr, function(i, obj){
    index:遍历出来的元素的下标;
    obj:遍历出来的元素;
    json_arr:js的json普通数组
    console.log(‘unma:‘+obj.uname);
});

$obj.load()

作用

把指定URL的HTML内容 加载到指定的元素中

语法

  

$obj.load(url, data, callback)
    $obj:显示内容的元素(HTML元素)
    url:请求地址
    data:向url传入的参数【可选择】
        方式1(GET请求):
            查询字符串:key=value&key1=value1...
        方式2(POST请求):
            使用js对象/JSON对象
            {"name":"gengyufei"}
    【注意】:不传参数时,默认get请求
    callback:响应成功回调该函数【可选择】

$.get()

作用:

通过get方式异步的向远程地址发送请求

$.get(url, data, callback, type)
    url:请求地址
    data:传递到服务器端的参数
        1、字符串:"name=geng&age=18"
        2、js对象:
            {
                name:‘geng‘,
                age:18
            }
    callback:响应成功后的回调函数
        // data:后端返回到前端的返回值
        eg:function(data){
            console.log(data)
        }
    type:响应回来的数据格式
        取值如下:
        1.html:响应回来的文本是html文本
        2.text:响应回来的文本是text文本
        3.script:响应回来的文本是js执行脚本
        4.json:响应回来的文本是json格式的文本

实例:

<head>
    // 引入jQuery
    <script type="text/javascript" src="{% static ‘bootstrap-3.3.7/js/jquery-1.12.4.min.js‘ %}"></script>
</head>
?
<body>
    <button id="btn">ajax_jquery_get</button>
    <div id="ajax_jquery_get_show"></div>
    <script>
        $(function () { // $(function ()作用:等待页面加载完毕,再执行js代码
            // 获取btn对象(按钮事件)
            $(‘#btn‘).click(function () {
                // 主角出现:jQuery的get方法
                // $.get(url, data, 回调函数, type)
                $.get(‘/ajax/jquery_get_server/‘, function (data) {
                    // 假装‘/ajax/jquery_get_server/‘该地址返回json字串:{"uname": "...", "age":"..."}
                    var msg = ‘name is ‘ + data.uname;
                    msg += ‘age is ‘ + data.age;

                    // 在id=ajax_jquery_get_show的div元素内显示msg
                    // $(‘#id_html‘).html(msg)作用:在id=id_html的html元素内,显示msg
                    $(‘#ajax_jquery_get_show‘).html(msg);
                }, ‘json‘)
            })
        })
    </script>
</body>

$.post()

作用:

通过post方式异步的向远程地址发送请求

注意: post方式,参数:必须包含csrf_token!!!(这个是针对Django开发来讲的,如果是其他语言或者框架,另当别论)

$.get(url, data, callback, type)
    url:请求地址
    data:传递到服务器端的参数
        1、字符串:"name=geng&age=18"
        2、js对象:
            {
                name:‘geng‘,
                age:18
                csrf:
            }
    callback:响应成功后的回调函数
        // data:后端返回到前端的返回值
        eg:function(data){
            console.log(data)
        }
    type:响应回来的数据格式
        取值如下:
        1.html:响应回来的文本是html文本
        2.text:响应回来的文本是text文本
        3.script:响应回来的文本是js执行脚本
        4.json:响应回来的文本是json格式的文本

实例:

<head>
    // 引入jQuery
    <script type="text/javascript" src="{% static ‘bootstrap-3.3.7/js/jquery-1.12.4.min.js‘ %}"></script>
</head>
?
<body>
    {# $.post() #}
    <div>
        name:<input type="text" id="input_name">
        age: <input type="text" id="input_age">
        <input type="submit" id="submit" value="提交">
    </div>
    <script>
        $(function () { // $(function ()作用:等待页面加载完毕,再执行js代码
            $(‘#submit‘).click(function () {
?
                var data = {
                    name:$(‘#input_name‘).val(),
                    age:$(‘#input_age‘).val(),
                    // 关键点:没有csrf_token,会报错:403,forbidden
                    csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(),
                }
?
                // $.post(url, data, func, type)
                // 假装‘/ajax/jquery_get_server/‘该地址返回json字串:{"msg": "..."}
                $.post(‘/ajax/jquery_post_server/‘, data, function (res) {
                    // alert :在浏览器弹窗,显示后端返回信息
                    alert(‘response msg is‘+ res.msg);
?
                }, ‘json‘)
?
            })
        })
?
    </script>
</body>

$.ajax()-终极模式(企业常用)

作用:

jQuery对ajax的终极支持!!!

# 最高频使用的8个参数:
参数对象中的属性:
    1.url:字符串,表示异步请求的地址
    2.type:字符串,请求方式:get或post
    3.data:传递到服务器端的参数
        1、字符串:"name=geng&age=18"
        2、js对象:
            {
                name:‘geng‘,
                age:18
                csrf:
            }
    4.dataType:字符串,响应回来的数据的格式
        1.‘html‘
        2.‘xml‘
        3.‘text‘
        4.‘script‘
        5.‘json‘
        6.‘jsonp‘ //有关跨域的响应格式
    5.success:回调函数,请求和响应成功时,回来执行的操作
    6.error:回调函数,请求或响应失败时,回来执行的操作
    7.beforeSend:回调函数,发送ajax请求之前,执行的操作,如:return false,则终止请求
    8.async:是否为异步请求,true为异步,false为同步

语法:

$.ajax({
    url:‘‘,
    type:‘get‘/‘post‘,
    data:{
        name:‘‘,
        csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(),
    },
    dataType:‘json‘,
    success:function () {

    },
    error:function(){

    },
    beforeSend:function(){

    },
})

实例:

$("button").click(function(){
    $.ajax({
        url:"demo_test.txt",
        type:‘post‘,

        data:{
        name:‘‘,
        csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(),
        },

        dataType:‘json‘,

        success:function(result){
        $("#div1").html(result);
        },

        beforeSend:function(){

        },
    });
}); 

beforeSend经典用法:

  1. 场景:用户注册
  2. 功能:
    • 用户输入账号密码完毕
    • 点击【提交】按钮完毕
    • 在网络传输过程中,网速慢的情况下,显示动画效果,等待服务器响应
    • 在网络传输过程中,网速慢的情况下,提交按钮变为灰色不可用状态,直到得到服务器响应
  3. 代码实现:
    <head>
        // 引入jQuery
        <script type="text/javascript" src="{% static ‘bootstrap-3.3.7/js/jquery-1.12.4.min.js‘ %}"></script>
    </head>
    ?
    {# $.ajax()   #}
    <body>
        <span id="loading" style="display: none">加载中...[我是动画]</span>
        <button id="btn">jquery ajax</button>
    ?
        <script>
            $(function () {
                $(‘#btn‘).click(function () {
                    $.ajax({
                        url: ‘/ajax/jquery_ajax‘,
                        type: ‘post‘,
                        data:{
                            csrfmiddlewaretoken: $("[name=‘csrfmiddlewaretoken‘]").val(),
    ?
                        },
                        dataType:‘json‘,
                        async:true,
    ?
                        success:function () {
                            // post 请求发送成功
                            $(‘#loading‘).hide(3000); // 3秒内消失
                            // 弹框:登录成功
                            alert(‘登录成功‘);
    ?
                            // 提交按钮改为可用状态
                            $(‘#btn‘).removeAttr(‘disabled‘);
    ?
                        },
    ?
                        error:function () {
    ?
                        },
    ?
                        beforeSend:function () {
                            // 发送前,do something
                            $(‘#loading‘).show(); // 发送前,让等待元素span显示(show)
    ?
                            // 发送前,让button置灰,不可点击
                            $(‘#btn‘).attr({disabled:‘disabled‘})
    ?
                        },
                    })
                })
            })
        </script>
    </body>

经典用法:异步获取用户列表

  1. 场景:异步刷新用户列表界面
  2. 实例:
    <head>
        // 引入jQuery
        <script type="text/javascript" src="{% static ‘bootstrap-3.3.7/js/jquery-1.12.4.min.js‘ %}"></script>
    </head>
    ?
    <body>
        <button id="btn">show data</button>
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
            </tr>
        </thead>
        <tbody id="show"></tbody>
    ?
        <script>
            $(function () {
                $(‘#btn‘).click(function () {
                    $.ajax({
                        url: ‘/ajax/jquery_show‘,
                        type: ‘get‘,
                        dataType: ‘json‘,
                        async: true,
                        data: {},
                        success: function (data) {
                            var html = ‘‘;
    ?
                            $.each(data, function (i, obj) {
                               html += ‘<tr>‘;
                                html += ‘<td>‘ + obj.name + ‘</td>‘;
                                html += ‘<td>‘ + obj.age + ‘</td>‘;
                               html += ‘</tr>‘;
                            });
                            $(‘#show‘).html(html);  // 在id= show的html标签显示用户信息
                        },
    ?
                        error: function () {
    ?
                        },
    ?
                        beforeSend: function () {
    ?
                        },
                    })
                })
            })
        </script>
    </body>

原文地址:https://www.cnblogs.com/gengyufei/p/12585926.html

时间: 2024-10-26 10:01:29

jQuery ajax 异步请求的相关文章

通过jquery的ajax异步请求接收返回json数据

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "jsonp", success : function (data) { $.

Ajax异步请求(二)

业精于勤,荒于嬉:行成于思,毁于随. ----致自己 目录: 二.jQuery四种常用的Ajax请求方式简介 1.$.ajax() 2.$.get() 3.$.post() 4.$.getJSON() ==================1.$.ajax()======================== jQuery在异步请求方面封装的较好,直接使用Ajax比较麻烦,jQuery大大简化了我们的使用,不用考虑浏览器之间的差异了. $.ajax()是jQuery底层ajax的实现,$.get()

MVC的Ajax异步请求

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 @using (Ajax.BeginForm("GetTime","order",new AjaxOptions()           {               Confirm="你确认这么做吗?",               HttpMethod="post",               OnSuccess

MVC&amp;WebFomr对照学习:ajax异步请求

写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认为虽然mvc和webform有诸多不同,但是也只是为了达到相同的目的而在各自的机制下采取了不同的手段而已.更何况它们都是基于asp.net框架的.因此在解决mvc开发过程中的问题时,我很容易联想到在webform下同样的问题是如何解决的.以此来作为对照.我姑且把这种方法叫做迁移学习法吧.我以"小孩之

SpringMVC环境下实现的Ajax异步请求(JSON格式数据)

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回

作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MVC与json参考文章:[spring学习笔记-mvc-3]返回json数据-方式1  和 [spring学习笔记-mvc-4]返回json数据-方式2. 使用到的技术主要如下: Ajax:使用JQuery 提供的ajax:==>需要引入jquery.min.js文件: Spring MVC: Jso

ajax异步请求302

我们知道,只有请求成功ajax才会进行回调处理,具体状态码为 status >= 200 && status < 300 || status === 304; 这一点通过查看JQuery的源码就可以证实. // Cache response headers responseHeadersString = headers || ""; // Set readyState jqXHR.readyState = status > 0 ? 4 : 0; //

ajax异步请求302分析

1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳转处理),b页面中的ajax请求的回调中就会出现问题,今天遇到了,有种恍然大悟的感觉,打开以前公司的网站发现全都没做任何处理...... 没遇到过错误,永远不知道错误会什么时候出现. 2.问题:在ajax异步请求中,如果服务端出现内部跳转,如何在回调中处理 我们先来看这样一个简单的ajax异步请求

黑马eesy_15 Vue:vue语法和生命周期与ajax异步请求

自学Java后端开发,发现14 微服务电商[乐优商城]实战项目,在介绍完SpringCloud后就要肝前端基础知识ES6和Vue. 所以本篇入门Vue练习记录的过程,目的是供自学后端Java遇到Vue使用需求的时候加强一下Vue基本使用的能力. vue语法和生命周期与ajax异步请求 1.Vue的快速入门2.Vue的语法 插值表达式 事件的绑定 数据的显示 逻辑判断和循环输出3.Vue的生命周期 8个生命周期的执行点 4个基本的 4个特殊的4.axios的ajax异步请求 它和jquery的aj