2019.03.24 Ajax

也还是会用到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>
上一篇:createObjectURL方法 实现本地图片预览


下一篇:laravel部署创建新项目 助记