也还是会用到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对微信自动进行消息推送

    from wxpy import * #该库主要是用来模拟与对接微信操作的 import requests from datetime import datetime import time impo ...

  2. 更新docker时间-需要重启docker

    更新docker时间:1.docker run -d -v /etc/localtime:/etc/localtime:ro [IMAGE] 2.重启,docker-compose up -d 3.d ...

  3. js函数 eql，equal，equalp

    function eql(obj, other) { if(stringp(obj) && stringp(other) && obj === other) retur ...

  4. Steeltoe之Config客户端篇

    Steeltoe是一款开源项目,其目标是选取源自Netflix及其它公司的工具,使它们能够运用于.NET社区.它不仅可以在.NET Core上,也可以在.NET Framework 4.X以上使用.此 ...

  5. [No0000120]Python教程3/9-第一个Python程序

    现在,了解了如何启动和退出Python的交互式环境,我们就可以正式开始编写Python代码了. 在写代码之前,请千万不要用“复制”-“粘贴”把代码从页面粘贴到你自己的电脑上.写程序也讲究一个感觉,你需 ...

  6. mysql 事务队列 写入 幂等性 重复写入

    mysql  事务队列   写入 幂等性  重复写入

  7. .net Core2建立MVC网站，部署

    1..net Core2使用sqlservver.EFCore,部署在linux上将出错,具体是错原因大概是:连接超时的意思.=>就想测试下linux到底能不能连接sqlserver.是两者技术 ...

  8. iOS-原生纯代码约束总结（二）之 AutoLayout

    一,概述 AutoLayout相比AutoResizing更加实用,是可以完全替代AutoResizing的一种自动布局方式.而在使用AutoLayout前,我们必须理解一个属性,那就是transla ...

  9. [administrative] windows 下制作USB启动盘的工具

    arch魔教的文档:  https://wiki.archlinux.org/index.php/USB_flash_installation_media windows 下的 dd: https:/ ...

  10. sql server 实现多表连接查询

    项目中要实现多表查询,用外连接实现. a表 a(aid,aname) 其中aid为pk b表 b(aid,bname,aid) 其中 bid为pk,aid为fk c表 c(cid,cname,aid) ...