也还是会用到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 读取目录、文件

    在读文件的时候往往需要遍历文件夹,python的os.path包含了很多文件.文件夹操作的方法.下面列出: os.path.abspath(path) #返回绝对路径 os.path.basename ...

  2. 实验一：基于STM32F1的流水灯实验(库函数)

    参考原子哥学习程序 条件:实验板STM32103ZET6:固件库STM32F10x_StdPeriph_Lib_V3.5.0:环境MDK5: 目的:了解STM32 的 IO 口如何作为输出使用 :以两 ...

  3. rsync 常用参数

    rsync 常用参数的具体解释如下: -v, --verbose 详细模式输出-q, --quiet 精简输出模式-c, --checksum 打开校验开关,强制对文件传输进行校验-a, --arch ...

  4. ubuntu部署安装 MySQL 5.7

    安装 MySQL 5.7安装 MySQL 运行命令: apt-get -y install mysql-server mysql-client 你会被要求提供MySQL的root用户密码 : New ...

  5. 网易云信&七鱼市场总监姜菡钰：实战解读增长黑客在B端业务的运用

    近些年 ,随着互联网的迅速崛起,“增长黑客”一词逐渐映入大众的眼帘,并成为了最热门的话题之一.从2018年开始,线上流量触达天花板,引流之争的激烈程度空前高涨,企业为了获得更多的关注,产品的比拼.流量 ...

  6. {Python之进程} 背景知识 什么是进程 进程调度 并发与并行 同步\异步\阻塞\非阻塞 进程的创建与结束 multiprocess模块 进程池和mutiprocess.Poll

    Python之进程 进程 本节目录 一 背景知识 二 什么是进程 三 进程调度 四 并发与并行 五 同步\异步\阻塞\非阻塞 六 进程的创建与结束 七 multiprocess模块 八 进程池和mut ...

  7. 应用打开其xlspptdoc等

    http://www.libxl.com/documentation.html  xls读写编辑类库libxl https://blog.csdn.net/songbob/article/detail ...

  8. babel-preset-env使用介绍

    声明:文章转自https://www.cnblogs.com/ye-hcj/p/7070084.html 本文介绍一个babel转码神器babel-preset-env 简介 现如今不同的浏览器和平台 ...

  9. C内存模型

    C语言中内存分布及程序运行中(BSS段.数据段.代码段.堆栈) - 秦宝艳的个人页面 - 开源中国 https://my.oschina.net/pollybl1255/blog/140323

  10. jvisualvm All-in-One Java Troubleshooting Tool

    java 监控.故障.性能可视化分析 VisualVM: Download https://visualvm.github.io/download.html All-in-One Java Troub ...