也还是会用到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. 标准库 os、sys、logging、configparser、time、requests

    os : 与操作系统交互的模块 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于 ...

  2. .NET Core类库项目中如何读取appsettings.json中的配置

    这是一位朋友问我的问题,写篇随笔回答一下.有2种方法,一种叫丑陋的方法 —— IConfiguration ,一种叫优雅的方法 —— IOptions . 1)先看丑陋的方法 比如在 RedisCli ...

  3. RabbitMQ 内存控制 硬盘控制

    RabbitMQ服务器在启动时以及abbitmqctl set_vm_memory_high_watermark fraction 执行时,会检查计算机的RAM总大小. 默认情况下下, 当 Rabbi ...

  4. 通用网关接口 ruby perl web页面 文本处理 脚本语言

    小结: 1.只要可以对标准输入输出进行操作,那么无论任何语言都可以编写CGI程序. <代码的未来> 在Ruby诞生的1993年,互联网还没有现在这样普及,因此Ruby也不是一开始就面向We ...

  5. display style edit

    https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable <!doctype html> & ...

  6. java登录怎么做

    (一)1.先查找有没当前用户.2.对比用户名和密码3.返回用户信息 @Override public AppResultEntity userLogin(String username, String ...

  7. Java 输入/输出——处理流（RandomAccessFile）

    RandomAccessFile是Java输入/输出流体系中功能最丰富的文件内容访问类,它提供了众多的方法来访问文件内容,它既可以读取文件内容,也可以向文件输出数据.与普通的输入/输出流不同的是,Ra ...

  8. java中组合与聚合（聚集）的区别

    组合和聚合是有很大区别的,这个区别不是在形式上,而是在本质上:  组合:比如A类中包含B类的一个引用b,当A类的一个对象消亡时,b这个引用所指向的对象也同时消亡(没有任何一个引用指向它,成了垃圾对象) ...

  9. [development][thrift] RPC框架 thrift

    一: wiki:https://zh.wikipedia.org/wiki/Thrift 二: 来自IBM的介绍:https://www.ibm.com/developerworks/cn/java/ ...

  10. [skill] 异或

    都怪学习不好,或者老师教的不好.虽然知道异或的算法,但是始终不明白,到底有什么意义...直到今天,终于明白了. 还是应该怪我学的不好,不能怪老师. 今天有一个应用场景,写一个函数.这是一个hash表的 ...