也还是会用到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. python-Levenshtein几个计算字串相似度的函数解析

    linux环境下,没有首先安装python_Levenshtein,用法如下: 重点介绍几个该包中的几个计算字串相似度的几个函数实现. 1. Levenshtein.hamming(str1, str ...

  2. ELK之使用kafka作为消息队列收集日志

    参考:https://www.cnblogs.com/fengjian2016/p/5841556.html    https://www.cnblogs.com/hei12138/p/7805475 ...

  3. 引用：WebAPI中的定时处理-使用Quartz.Net

    引用: https://blog.csdn.net/lordwish/article/details/78926252 主要是给自己做个记录,不用到处找,这篇文章写的很全,推荐 文中:在项目的Glob ...

  4. Datatables js 复杂表头 合并单元格

    x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官 ...

  5. MySQL的JDBC驱动源码解析

    原文:   MySQL的JDBC驱动源码解析 大家都知道JDBC是Java访问数据库的一套规范,具体访问数据库的细节有各个数据库厂商自己实现 Java数据库连接(JDBC)由一组用 Java 编程语言 ...

  6. 洛谷试炼场-简单数学问题-P1045 麦森数-高精度快速幂

    洛谷试炼场-简单数学问题 B--P1045 麦森数 Description 形如2^P−1的素数称为麦森数,这时P一定也是个素数.但反过来不一定,即如果PP是个素数,2^P-1 不一定也是素数.到19 ...

  7. 内部排序->交换排序->起泡排序

    文字描述 首先将第一个记录的关键字和第二个记录的关键字进行比较,若为逆序(L.r[1].key>L.r[2].key),则将两个记录交换位置,然后比较第二个记录和第三个记录的关键字.依次类推,直 ...

  8. tornado框架&三层架构&MVC&MTV&模板语言&cookie&session

    web框架的本质其实就是socket服务端再加上业务逻辑处理, 比如像是Tornado这样的框架. 有一些框架则只包含业务逻辑处理, 例如Django, bottle, flask这些框架, 它们的使 ...

  9. spring boot动态数据源方案

    动态数据源 1.背景 动态数据源在实际的业务场景下需求很多,而且想要沟通多数据库确实需要封装这种工具,针对于bi工具可能涉及到从不同的业务库或者数据仓库中获取数据,动态数据源就更加有意义. 2.依赖 ...

  10. Python中Mock的示例（转）

    原文:https://segmentfault.com/a/1190000008753754 一些常用的mock示例 先简单定义个类,方便举例: class Person: def __init__( ...