• ajax示例


    ajax(Asynchronous Javascript And XML)翻译成中文就是异步的javascript和XML,即用javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)

    ajax不是新的变成语言,而是一种使用现有标准的方法

    ajax最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页的内容(这一特点给用户的感受是在不知不觉中完成请求和响应的过程)

    ajax不需要任何浏览器插件,但需要用户允许javascript在浏览器上执行

    同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求

    异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求

    ajax常见应用情景

    搜索引擎根据用户输入的关键字,自动提示检索关键字

    注册时候用户名查重

    当文本框发生了输入变化时,使用ajax技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果显示出来

    整个过程页面没有刷新,只是刷新页面中的局部位置而已

    当请求发出后,浏览器还可以进行其他操作,无需等待服务器响应

    下面是用jquery实现的ajax的demo

    ajax_demo1.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>AJAX局部刷新实例</title>
    </head>
    <body>
    
    <input type="text" id="i1">+
    <input type="text" id="i2">=
    <input type="text" id="i3">
    <input type="button" value="AJAX提交" id="b1">
    
    <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"></script>
    
    <script>
      $("#b1").on("click", function () {
        $.ajax({
          url:"/ajax_add/",
          type:"GET",
          data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
          success:function (data) {
            $("#i3").val(data);
          }
        })
      })
    </script>
    </body>
    </html>

    views.py

    def ajax_demo1(request):
        return render(request, "ajax_demo1.html")
    
    
    def ajax_add(request):
        i1 = int(request.GET.get("i1"))
        i2 = int(request.GET.get("i2"))
        ret = i1 + i2
        return JsonResponse(ret, safe=False)
    
    views.py

    urls.py

    urlpatterns = [
        ...
        url(r'^ajax_add/', views.ajax_add),
        url(r'^ajax_demo1/', views.ajax_demo1),
        ...   
    ]
  • 相关阅读:
    基于 Spring Cloud 的微服务架构实践指南(上)
    1分钟,带你上手“Markdown”语法
    Spring Cloud 理论篇
    如何设计一个优雅的RESTFUL的接口
    简简单单之Linux命令入门
    SpringBoot基础架构篇3(Redis)
    SpringBoot基础架构篇1(SpringBoot、MyBatis-Plus与Thymeleaf)
    基础之Lambda和Stream的邂逅
    浏览器如何执行JS
    渲染进程里的线程
  • 原文地址:https://www.cnblogs.com/z-x-y/p/10152555.html
Copyright © 2020-2023  润新知