zoukankan      html  css  js  c++  java
  • 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),
        ...   
    ]
  • 相关阅读:
    安装mysql到服务器的linux环境下
    Junit
    shell编程控制结构:expr、let、for、while、until、shift、if、case、break、continue、函数、select
    JavaScript组合继承的一点思考
    JavaScript-2.内置对象---简单脚本之弹出对话框显示当前时间 ---ShinePans
    Python之美[从菜鸟到高手]--2+2=5
    Flex中配置FusionCharts
    [WHY]Hello, Worktile~
    数据库学习之中的一个: 在 Oracle sql developer上执行SQL必知必会脚本
    Remove Nth Node From End of List
  • 原文地址:https://www.cnblogs.com/z-x-y/p/10152555.html
Copyright © 2011-2022 走看看