zoukankan      html  css  js  c++  java
  • AJAX

    1. 我们前端往后端发请求的方式:
      1. 直接在地址栏输入URL
      2. a标签   <a href=" ">XX</a>
      3. form表单
      4. AJAX

      HTTP请求的类型:
        GET  --> 1. 浏览器请求一个页面      2. 搜索引擎检索关键字的时候

        POST -->  1. 浏览器向服务端提交数据,比如登录/注册等

    AJAX的应用场景:

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

      2.注册时候用户名的查重!

      


    2. AJAX优点:
      1. 异步 :AJAX使用JavaScript技术向服务器发送异步请求
      2. 局部刷新(偷偷发请求):应为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高!

    3. AJAX缺点:
      请求零碎,滥用对服务端压力大

    4. jQuery封装的AJAX方法:

    # 先导入jquery.js
    $.ajax({
        url: "/test/",
        type: "post",
        data: {"key": "value", "key2": [[1, 2, 3], [4, 5, 6]]},
        success: function(arg){
            // 请求得到响应的时候,自动执行这个回调函数
            console.log(arg);
        }
    })

    views.py

    from django.shortcuts import render, redirect, HttpResponse
    from xxx import models
    
    def check_user(request):
        if request.method == "POST":
            name = request.POST.get("name", None)
            # 去数据库中查询用户名时候已经被注册
            print(name)
            ret = models.Person.objects.filter(name=name)
            if ret:
                # 用户名已经存在!
                msg = "用户名已经被注册!"
            else:
                msg = "用户名可用"
            return HttpResponse(msg)

     XXX.HTML

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>AJAX用于注册用户名的查重</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="/static/dashboard.css">
    
    </head>
    <body>
    <form action="/ajax/xxx/" method="post">
        <p>用户名:
            <input type="text" id="i6" name="name">
            <span id="e1"></span>
        </p>
        <p>密码:
            <input type="password" name="pwd">
        </p>
        <p>
            <input type="submit" value="登录">
        </p>
    </form>
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/setupajax.js"></script>
    <script> {#$("#i6").on("input", function () {#}
    $("#i6").blur(function () {
        //取到input框里面的值 
        var $i4Ele = $(this);
        var name = $i4Ele.val();
        //将span标签设置为空  
        $("#e1").text("");
        //利用ajax请求偷偷发送到后端  
        $.ajax({
            url: "/ajax/check_user/",
            type: 'post',
            data: {"name": name},
            datatype: 'json',
            success: function (arg) {
                $("#e1").text(arg).css("color", "blue");
            }
        })
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    C# 9.0语法新特性【废弃,自用,无参考价值】
    0兆宽带年费过万,垄断坑企咋破
    筹划建立题目该如何作答?
    去重 sort -u
    大城市治理
    申论话题
    面试 思维
    成语
    人民日报怒批机关事业单位三大怪状
    留痕主义
  • 原文地址:https://www.cnblogs.com/zhanghongqi/p/11216645.html
Copyright © 2011-2022 走看看