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),

    ...

]

巴特西

ajax示例

最新文章

热门文章