也还是会用到jquery中的Ajax请i求

所以第一还是引入jQuery包   可以去网上搜腾讯网静态资源库

然后引入包    Ajax还是异步处理  处理堵塞问题  import time 就可以了

一共有三种吧，然后就是post要注意csrf这个  要打开F12去看到隐藏的值，然后导入

看到的值是健

概要

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

局部刷新技术。

应用场景： 在页面比较复杂情况下，只需要更新局部内容。

语法

  1. GET请求

var data = {'uname':'zhangsan'}
​
    //发送ajax请求
    $.get('/student/getinfo/',data,function(result){
​
        alert(result.hello)
    })
    
    

  1. POST请求

 var csrf = $('input[name="csrfmiddlewaretoken"]').val();
 var data = {'uname':'zhangsan','csrfmiddlewaretoken':csrf}
 $.post('/student/getinfo/',data,function(result){
                alert(result.hello)
            })
​

  1. 自定义AJAX请求

  2. $.ajax({
    url:'/student/getinfo/',
    type:'get',
    data:'uname=lisi&pwd=123',
    async:true,
    success:function (result) {
    var test = result.hello

    $('#hid').html(test)
    }

    })

        1. 　　确定需求

          #访问路径：
          http://127.0.0.1:8000/student/only/
          ​

          配置URL

          # 项目包/urls.py
          from django.conf.urls import url, include
          from django.contrib import admin
          ​
          urlpatterns = [
              url(r'^admin/', admin.site.urls),
              url(r'^student/', include('stu.urls')),
          ]
          ​
          # 应用包/urls.py
          #coding=utf-8
          ​
          from django.conf.urls import url
          import views
          ​
          urlpatterns=[
              url(r'^only/$',views.onlyView),
              url(r'^isExist/$',views.existView),
          ]
          ​
          ​
          ​

          创建视图

          def onlyView(request):
          ​
              return render(request,'only.html')
          ​
          ​
          def existView(request):
              #接收请求参数
              uname = request.GET.get('uname','')
          ​
              #判断数据库中是否存在
              stuList = Student.objects.filter(sname=uname)
          ​
              if stuList:
                  return JsonResponse({'flag':True})
              return JsonResponse({'flag':False})
          ​
          ​

          创建模板页面（only.html）

          ​
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          ​
              <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
              <script>
                  //onblur:失去焦点
                  //onfocus:获得焦点
          ​
                  function checkUname(){
                      //1.获取文本框内容
                      var uname = $('#uname').val();
          ​
                      //2.非空校验
                      if(uname.length==0){
                          $('#unameSpan').html('*');
                          $('#unameSpan').css('color','red');
          ​
                      }else{
                      //3.判断唯一性
                          $.get('/student/isExist/',{'uname':uname},function(result){
                              //alert(typeof result.flag)
                              r = result.flag;
          ​
                              //4.根据服务器端的响应信息进行页面更新
                              if(r){
                                  $('#unameSpan').html('此用户名太受欢迎了，请换一个吧~');
                                  $('#unameSpan').css('color','red');
                              }else{
                                  $('#unameSpan').html('√');
                                  $('#unameSpan').css('color','green');
          ​
                              }
                          })
          ​
          ​
          ​
          ​
                      }
          ​
          ​
                  }
          ​
              </script>
          </head>
          <body>
              用户名：<input type="text" name="uname" id="uname" onblur="checkUname()"/><span id="unameSpan"></span>
          ​
          </body>
          </html>
          ​

2019.03.24 Ajax的更多相关文章

  1. 2019.03.25 Ajax三级联动

    所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果 如选择市之后,会给出相应的区,然后到相应的县这就是联动 配置视图 ​from django.core import serialize ...

  2. Alpha冲刺(1/10)——2019.4.24

    所属课程 软件工程1916|W(福州大学) 作业要求 Alpha冲刺(1/10)--2019.4.24 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪 ...

  3. [2019.03.25]Linux中的查找

    TMUX天下第一 全世界所有用CLI Linux的人都应该用TMUX,我爱它! ======================== 以下是正文 ======================== Linu ...

  4. 2019.03.03 - Linux搭建go语言交叉环境

    编译GO 1.6版本以上的需要依赖GO 1.4版本的二进制,并且需要把GOROOT_BOOTSTRAP的路径设置为1.4版本GO的根目录,这样它的bin目录就可以直接使用到1.4版本的GO 搭建go语 ...

  5. Beta冲刺(3/7)——2019.5.24

    所属课程 软件工程1916|W(福州大学) 作业要求 Beta冲刺(3/7)--2019.5.24 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪万里 ...

  6. “耐撕”团队 2016.03.24 站立会议

    时间: 2016.03.22  17:00-17:30     18:30-19:00 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), ...

  7. [2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动

    刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不 ...

  8. 2019.03.30 图解HTTP

    文章来源<图解HTTP> 第一章 了解Web及网络基础 你有想过当你在浏览器(web browser)的地址栏上输入URL时,Web页面是如何实现的吗? 嗯,好像也没想过 web使用一种名 ...

  9. 2019.03.23 Cookie

    Cookie  曲奇饼干  哈哈哈.通俗的将,应该是发票. 因为http是无状态操作 当你访问服务器之后,应该会给你响应发票Cookie记录你访问了什么东西 便于下次再来查找吧,Cookie有时间的限 ...

随机推荐

  1. 在浏览器中输入 www.baidu.com 后执行的全部过程

    现在假设如果我们在客户端(客户端)浏览器中输入http://www.baidu.com,而baidu.com为要访问的服务器(服务器),下面详细分析客户端为了访问服务器而执行的一系列关于协议的操作: ...

  2. ajax 获取服务器返回的XML字符串

    前台 解析失败不会抛出任何异常, 只会返回一个给定的错误文档 let l = console.log let http = ajanuw.create({ uri: 'http://localhost ...

  3. spring事务实现原理

    实现原理 本质 如果你用过Spring AOP,那么理解注解事务就十分简单了.事务注解本质上实在事务方法加入一个Around切面,在方法开始前开始事务,在抛出异常后回滚事务.使用简单伪代码可以简单理解 ...

  4. python 写入CSV出现空白行问题及拓展

    最近在学习python,要求让出表格.期间在不懂得情况下,写了些代码,运行后发现存在输入写入猴行之间存在空白行.猴发现原来问题在打开文件的方式不对. 现将我的学习交流经验分享如下: 1,自己的起初代码 ...

  5. 2018ACM-ICPC南京区域赛---AJGIDKM

    含[最小球覆盖][最大流isap]模板. 题面pdf https://codeforc.es/gym/101981/attachments/download/7891/20182019-acmicpc ...

  6. MySQL5.6的4个自带库详解

    MySQL5.6的4个自带库详解 1.information_schema详细介绍: information_schema数据库是MySQL自带的,它提供了访问数据库元数据的方式.什么是元数据呢?元数 ...

  7. {MySQL数据库初识}一 数据库概述 二 MySQL介绍 三 MySQL的下载安装、简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集编码 六 初识sql语句

    MySQL数据库初识 MySQL数据库 本节目录 一 数据库概述 二 MySQL介绍 三 MySQL的下载安装.简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集编码 六 ...

  8. java基础解析系列(二)---Integer

    java基础解析系列(二)---Integer 前言:本系列的主题是平时容易疏忽的知识点,只有基础扎实,在编码的时候才能更注重规范和性能,在出现bug的时候,才能处理更加从容. 目录 java基础解析 ...

  9. Older Versions Of Eclipse

    Older Versions Of Eclipse Need help with older versions of Eclipse? LTS Request The following are li ...

  10. [No0000B1]ReSharper操作指南2/16-ReSharper食谱与特定于域的教程

    自动导入名称空间 有关更多信息,请参阅导入缺少命名空间. 每当您使用未添加using语句的命名空间中的类型时,ReSharper会为您提供在您所在文件的顶部添加相应的语句.这由在所使用的类型上方显示的 ...