Ajax介绍及基础应用(三)

最新推荐文章于 2024-07-18 10:00:11 发布
最新推荐文章于 2024-07-18 10:00:11 发布
阅读量129 收藏 1
点赞数
分类专栏： Python Ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu673153041/article/details/94876444
版权

七.JQ对AJAX的支持

1.$obj.load()

  • 作用:载入远程的HTML文件到指定的元素中

  • 语法:

    $obj.load(url,data,callback)
    • $obj:用来显示响应内容的JQ元素(从远程载入的HTML文件所放入的元素)
    • url:请求的远程地址
    • data:请求到远程地址上的参数(可省略)
      • 方式1:字符串传参
        • “key1=value1&key2=value2”
        • 注:此种传参方式会使用GET方式发送请求
      • 方式2:使用JS对象传参
        • {
          key1:“value1”,
          key2:“value2”
          }
        • 注:此种传参方式会使用POST方式发送请求
    • callback:响应成功之后的回调函数(可省略)(响应成功后想干点什么,匿名函数)

  • 示例:

    # django_app_name/views.py

def load_views(request):
    return render(request, '01-load.html')

def server01(request):
    # 接受前端传递过来的参数 - 字符串传参
    # uname = request.GET['uname']
    # uage = request.GET['uage']

    # 接受前端传递过来的参数 - JS对象传参
    uname = request.POST['uname']
    uage = request.POST['uage']
    return render(request, '01-server.html', locals())

    <!-- templates/01-load.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-load</title>
    <script src="/static/js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $("#btnLoad").click(function () {
                // 1.通过字符串表示传参
                // var params = 'uname=lvze&uage=30';
                // $("#baidu").load("/ajax/01-server",params);

                // 2.通过js对象表示参数
                var params = {
                    uname:'maria',
                    uage:30,
                    csrfmiddlewaretoken:$("[name = 'csrfmiddlewaretoken']").val(),
                };
                $("#baidu").load("/ajax/01-server/",params,function () {
                    window.setTimeout(function () {
                        // 在3秒钟之内将#baidu元素隐藏
                        $("#baidu").hide(3000);
                    },5000)
                })
            });
        })
    </script>
</head>
<body>
    {% csrf_token %}
    <button id="btnLoad">加载01-server</button>
    <div id="baidu"></div>
</body>
</html>

<!-- templates/01-server.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-server</title>
</head>
<body>
    <h1>这是01-server.html的server</h1>
    <h2>姓名:{{ uname }}</h2>
    <h2>年龄:{{ uage }}</h2>
    <ul>
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">购物车</a>
        </li>
        <li>
            <a href="#">个人信息</a>
        </li>
    </ul>
</body>
</html>

2.$.get()

  • 作用:通过GET方式异步的向远程地址发送请求(只支持异步,不支持同步)

  • 语法:$.get(url,data,callback,type)

    • url:请求地址
    • data:发送到服务器端的参数
    • callback:响应成功之后的回调函数
    • type:响应回来的数据的数据格式
      • 取值如下:
        1. html:响应回来的文本是html文本
        2. Text:响应回来的文本是text文本
        3. script:响应回来的文本是js执行脚本
        4. json:响应回来的文本是JSON格式文本(JSON格式文本会转换成JSON对象)

  • 综合示例

    # django_app_name/views.py
def get_views(request):
    return render(request, '02-get.html')

def server02(request):
    dic = {
        'uname': 'Uzumaki Naruto',
        'uage': 16,
    }
    jsonStr = json.dumps(dic)
    return HttpResponse(jsonStr)

    <!-- templates/02-get.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-get</title>
    <script src="/static/js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $("#btnGet").click(function () {
                $.get('/ajax/02-server',function (data) {
                    // data表示响应回来的数据
                    console.log(data);
                    var msg = '姓名:'+data.uname;
                    msg += '年龄:'+data.uage;
                    $("#show").html(msg)
                },'json')
            })
        })
    </script>
</head>
<body>
    <button id="btnGet">JQ-Ajax-Get</button>
    <div id="show"></div>
</body>
</html>

3.$.post()

  • 作用:通过POST方式异步的向远程地址发送请求(只支持异步,不支持同步)

  • 语法:与GET方式相同,但是有data参数,因为需要向服务器端发送参数

  • 综合示例

    # django_app_name/views.py
def post_views(request):
    return render(request, '03-post.html')

def server03(request):
    # 获取到前端发送过来的参数
    uname = request.POST['uname']
    uage = request.POST['uage']
    ugender = request.POST['ugender']

    # 将前端发送过来的数据转换为字符串格式
    # msg = "name:%s,age:%s,gender:%s" % (uname, uage, ugender)

    # 将前端发送过来的数据转换为字典
    msg = {
        'uname':uname,
        'uage':uage,
        'ugender':ugender
    }
    # 将字典转换为JSON字符串
    msg = json.dumps(msg)
    print(msg)
    return HttpResponse(msg)

    <!-- templates/03-post.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-post</title>
    <script src="/static/js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $("#btnPost").click(function () {
                $.post('/ajax/03-server/',{
                    uname:$("#uname").val(),
                    uage:$("#uage").val(),
                    ugender:$("#ugender").val(),
                    csrfmiddlewaretoken:$("[name = 'csrfmiddlewaretoken']").val()
                },function (data) {
                    // alert("响应回来的内容:"+data);
                    console.log(data)
                },'json');
            })
        })
    </script>
</head>
<body>
    {% csrf_token %}
    <p>
        姓名:<input type="text" id="uname">
    </p>
    <p>
        年龄:<input type="text" id="uage">
    </p>
    <p>性别:
        <select id="ugender">
            <option value="male">男</option>
            <option value="female">女</option>
        </select>
    </p>
    <button id="btnPost">提交</button>
    <div id="show"></div>
</body>
</html>

4.$.ajax()

  • 作用:允许自定义所有的ajax操作

  • 语法:$.ajax({ajax的参数对象});

    • ajax的参数对象
      1. url:异步请求地址(必填)
      2. data:请求到服务器端的参数(POST必填,GET选填)
        1. 字符串
        2. JS对象
      3. type:请求方式,GET或POST(必填)
      4. dataType:服务器端响应回来的数据的格式(必填)
        • html,Text,script,json
      5. async:是否采用异步的方式发送请求(异步选填,同步必填)
        • true:使用异步(默认值)
        • false:使用同步
      6. success:响应成功之后的回调函数
        • function(data){
          data表示的是响应回来的数据
          }
      7. error:请求或响应失败时的回调函数

  • 综合示例

# django_app_name/views.py

def ajax_views(request):
    return render(request, '04-ajax.html')

def server04(request):
    list = [
        {
            "cname": "python基础",
            "teacher": "wangwu"
        }, {
            "cname": "web基础",
            "teacher": "lisi"
        }
    ]
    return HttpResponse(json.dumps(list))

<!-- templates/04-ajax.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-ajax</title>
    <script src="/static/js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $("#btnAjax").click(function () {
                $.ajax({
                    url:'/ajax/04-server',
                    type:'get',
                    dataType:'json',
                    async:true,
                    success:function (data) {
                        $(data).each(function (i, obj) {
                            console.log("课程名称:"+obj.cname);
                            console.log("授课老师:"+obj.teacher);
                        });
                    },
                    error:function () {
                        alert("操作有误,请联系管理员... ...")
                    }
                });
            });
        })
    </script>
</head>
<body>
    <button id="btnAjax">JQ-AJAX</button>
</body>
</html>

八.跨域(Cross Domain)

  1. 什么是跨域

    • HTTP协议中的一个策略 - ‘同源策略’

    • 同源:多个地址中,具备相同协议,相同域名,相同端口的地址称为"同源地址"

    • 在HTTP中,只有同源地址才能发送ajax请求,非同源地址是被拒绝的(<script>和<img>除外)

      http://www.tedu.cn/a.html
http://www.tedt.cn/server
以上地址是`同源地址`

http://www.tedu.cn/a.html
https://www.tedu.cn/server
以上地址是`非同源地址`

http://localhost:8000/a.html
http://127.0.0.1:8000/server
以上地址是`非同源地址`

  2. 实际项目中的跨域请求应用

    • 综合示例

      # django_app_name/views.py

def js_views(request):
    return render(request,'06-js.html')

def server06(request):
    # return HttpResponse("console.log('这是server06响应的内容')")
    # return HttpResponse("cross_callback('这是server06响应的内容')")
    # 1.接收前端传递过来的参数值
    cb = request.GET['callback']
    return HttpResponse(cb+"('这是server06cb响应的内容')")

      <!-- templates/06-js.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-js</title>
    <script src="/static/js/jquery-1.11.3.js"></script>
    <script>
        // function cross_callback(data) {
        //     alert(data);
        // }

        function abcd(data) {
            alert(data);
        }

        // $(function () {
        //     $("#btnJS").click(function () {
        //         var script = document.createElement("script");
        //         script.src = "http://localhost:8000/ajax/06-server";
        //         $("body").append(script);
        //     })
        // });

        $(function () {
            $("#btnJS").click(function () {
                var script = document.createElement("script");
                script.src = "http://localhost:8000/ajax/06-server?callback=abcd";
                $("body").append(script);
            })
        })
    </script>
</head>
<body>
<!--    <script src="/static/js/my.js"></script>-->
<!--    <script src="http://localhost:8000/ajax/06-server"></script>-->
<button id="btnJS">跨域请求</button>
</body>
</html>

    • 在浏览器端输入http://127.0.0.1:8000/ajax/06-js,点击跨域请求,浏览器会向http://localhost:8000/ajax/06-server地址发送请求,注意:此请求为跨域请求,并传入callback参数(函数名),在后端服务器中,通过cb = request.GET['callback']获取到前端传入过来的函数名称,然后在响应浏览器请求的时候将函数名和数据一起返回,这样就保证了后端仅仅只是处理数据,前端接受,同时因为是在<script>标签中,所以可以跨域接收

Mr.刘胖胖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX技术基础介绍
08-11
2. XMLHttpRequest：XMLHttpRequest是AJAX的基础，它是一个内置在浏览器中的对象，允许JavaScript在后台与服务器进行通信。通过这个对象，开发者可以发送HTTP请求，接收响应，而不会中断用户的交互。尽管名称中包含...
关于Ajax的架构介绍及解决方案
10-22
- **交互式网站框架**: 一个全面支持Ajax基础设施的框架，强调高交互性和可读性。 - **LibXMLHttpRequest**: XMLHttpRequest的一个轻量级包装器。 - **RSLite**: 另一个轻量级的XMLHttpRequest包装器。 - **Sack*...
jQuery对ajax的封装之$obj.load()的使用（二）
qq_42067619的博客
08-04 306
用法如$obj.load(url,[data])，向服务器发送异步请求，将服务器返回的数据直接添加到符合要求的节点中，常用参数如下：   1). url：请求地址   2) .data：请求参数(根据实际情况选用)     ①请求字符串，比如”adminCode=cxd”     ②对象格式，比如：{“adminCode”:”cxd”} 相较于$.ajax()方法，此方法在处理特定情况时更为简单，...
jquery load方法用法详解
热门推荐
天地乾坤的博客专栏
07-21 1万+
jquery load是jquery ajax中的一种功能，load可以方便快速的直接加载一个页面到指定div中（html,php），并且它可以带参数，下面我来给大家详细介绍load方法用法. 格式 load(url,data,function(response,status,xhr)) 如何使用data 1.加载一个php文件，该php文件不含传递参数  代码如下
你真的了解load方法么？
weixin_33811539的博客
05-18 266
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery load(url, [data], [callback])
linan0930的专栏
06-26 3854
函数含义：载入远程HTML文件代码并插入jQuery对象对应的
Ajax基础知识+项目应用案例
辰兮要努力
02-29 1587
文章目录一.什么是Ajax，为什么要使用Ajax?二.同步、异步交互概念三.AJAX实现四.原生JS中的Ajax原理（五个步骤） 一.什么是Ajax，为什么要使用Ajax? AJAX是“Asynchronous JavaScript and XML”的缩写。 ① 他是指一种创建交互式网页应用的网页开发技术。 ②客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯...
Ajax基础（应用场景｜jquery实现Ajax｜注意事项｜Ajax发送json数据｜Ajax携带文件数据）
Mchen的博客
11-20 5320
AJAX翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互也是用XML进行数据传输（当然，传输的数据不只是XML，目前更多的使用Json数据）。（XML应用于Web开发的许多方面，常用于简化数据的存储和共享）AJAX不是什么新的编程语言，而是一种使用现有标准的新方法AJAX最大的优点就是不需要重新加载整个页面的情况下，可以与服务器交换数据并更新网页内容（简单来说就是，在网页前端刚输入完数据，后端其实已经验证完数据了，不需要等点击提交了）
Ajax基础语法总结
xzd2333的博客
03-14 1363
Ajax技术：在网页不跳转的情况下，向服务器请求数据 应用场景：局部刷新
ajax介绍及实现步骤
crkres9527
05-16 2339
ajax并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一起，在共同的协作中发挥各种作用 使用XHTML和CSS标准化呈现； 使用DOM实现动态显示和交互； 使用XML和XSLT进行数据交换与处理； 使用XMLHttpRequest进行异步数据处理； 使用JavaScript绑定和处理所有数据； ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响...
Ajax（阿贾克斯）基础
weixin_47672177的博客
09-26 7512
Ajax是什么？服务器是什么？如何实现前后端数据交互？实际开发中，网页的数据需要从服务器获取。而Ajax技术就是来实现这一功能的。
AJAX基础教程及实例
03-06
AJAX简介 AJAX全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。 AJAX...
14ajax课程_AJAX基础_
10-02
**AJAX基础详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）是一种核心技术，它...掌握AJAX基础，有助于你更好地理解和构建现代Web应用程序。通过不断实践和学习，你可以进一步提升这方面的技能。
asp.net中AJAX技术基础及应用 PPT
01-01
Web应用与桌面应用有着完全不同的运行环境和编程模型，在目前的技术条件下，Web应用要完全超越已发展多年的桌面应用所拥有的丰富交互特性，还是很困难的。
强大的jquery对 ajax 的支持（各种情况的代码示例）
**kwargs的博客
01-09 115
1.$obj.load() ​ 作用：载入远程的HTML文件到指定的元素中 $obj.load(url,data,callback) $obj:显示响应内容的jq元素 url:请求地址 data:请求参数(可省略) 方式1:字符串传参 "key1=value1&key2=value2" 注：此种传参会使用 get 方式发送请求 方式2:使用JS对象传参 { ...
Spark学习之SparkSQL
m0_58050808的博客
07-16 534
Spark SQL中的DataFrame DSL（Domain Specific Language，领域特定语言）是一种用于处理DataFrame的编程风格，它允许开发者以命令式的方式，通过调用API接口来操作DataFrame。这种风格**介于代码和纯SQL之间，**提供了一种更加灵活和强大的数据处理方式。DataFrame DSL（Domain Specific Language，领域特定语言）中的。idea里面将代码编写好打包上传到集群中运行，上线使用。
webSocker消息推送，ajax轮询
最新发布
weixin_43617604的博客
07-18 406
但是，传统的AJAX并不直接支持实时消息推送，因为它基于请求-响应模式。为了模拟消息推送，你可以使用轮询（polling）或长轮询（long-polling）技术。但是，传统的AJAX并不直接支持实时消息推送，因为它基于请求-响应模式。为了模拟消息推送，你可以使用轮询（polling）或长轮询（long-polling）技术。一旦建立了WebSocket连接，服务器和客户端就可以随时向对方发送消息，而不需要像AJAX那样频繁地发起请求。轮询是定期向服务器发送请求，以检查是否有新的消息。
ajax实时监测与springboot的实例分析
羽墨墨的博客
07-16 515
ajax实时监测和springboot举例分析
AJAX基础与实战应用
AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种网页开发技术，它允许在不刷新整个网页...掌握AJAX的工作原理和回调机制是前端开发人员必备的技能，尤其是在构建动态网页和实时数据交互的应用时。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值