zoukankan      html  css  js  c++  java
  • Django Ajax

    一、什么是 AJAX ?

    AJAX = 异步 JavaScript 和 XMLAJAX 是一种用于创建快速动态网页的技术。
    
    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
    
    AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
        同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
        异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
    

    二、AJAX 工作原理

    前端绑定的事件触发,向后端发送一个请求
    后端接收请求,并处理得到相应的结果,将其发送至前端
    前端接收返回结果,显示在原先网页界面
    

    三、Ajax传输的数据

    1.Ajax字符串格式

    符合语法规范的json对象(json只认双引的字符串格式):
        ["one", "two", "three"]
        { "one": 1, "two": 2, "three": 3 }
        {"names": ["张三", "李四"] }
        [ { "name": "张三"}, {"name": "李四"} ] 
    

    2.stringfy与parse方法

    JavaScript中关于JSON对象和字符串转换的两个方法:
    JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)
    	JSON.parse('{"name":"Howker"}');
        JSON.parse('{name:"Stack"}') ;   // 错误
        JSON.parse('[18,undefined]') ;   // 错误
    
    JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
    	JSON.stringify({"name":"Tonny"})
    

    四、举个例子

    <!--页面输入两个整数,通过AJAX传输到后端计算出结果并返回。-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
    <button id="b1">Ajax Test</button>
    
    <script src="/static/jquery-3.3.1.min.js"></script>
    <script>
        $('#b1').click(function () {
            $.ajax({
                url:'',
                type:'POST',
                data:{i1:$('#i1').val(),i2:$('#i2').val()},
                success:function (data) {
                    $('#i3').val(data)
                }
            })
        })
    
    </script>
    </body>
    </html>
    html页面
    # views.py
    def ajax_test(request):
        if request.method=='POST':
            i1=request.POST.get('i1')
            i2=request.POST.get('i2')
            ret=int(i1)+int(i2)
            return HttpResponse(ret)
        return render(request,'ajax_test.html')
    
    # urls.py
    from django.conf.urls import url
    from app01 import views
    urlpatterns=[
        url(r'^ajax_test/',views.ajax_test),
    ]
    后续的内容还会写的......


  • 相关阅读:
    剑指Offers 题目1384:二维数组中的查找
    剪切板获取图片并上传
    VSCode TSlint + Prettier 实现代码的格式化
    Element Table 合并列
    Linux下安装Redis
    transfer 增加拖拽排序组件封装
    在VSCode中使用Git处理文件冲突(pull不能从服务器拉取代码)
    Vue的 transition在v-for的嵌套下怎么用
    Vant的picker组件放在popup中,导致ref获取不到
    小工具
  • 原文地址:https://www.cnblogs.com/xt12321/p/11025037.html
Copyright © 2011-2022 走看看