zoukankan      html  css  js  c++  java
  • ajax

    1、Urls.py

    url(r'^index/', views.index),
    url(r'^ajaxHandle/', views.ajaxHandle),
    一、接下来应该给这个button按钮绑定一个事件了。用jQuery绑定事件
        1、引入jQuery
            (1)配置静态文件

    2、Index.html:

    <p>用户名<input type="text" class="user"></p>
    <br>
    <button>ajax</button>
    <script>
        $(".user").blur(function () {
            var user=$(this).val();
            $.ajax({                            #语法
                url:"/ajaxHandle/",              #数据提交给谁
                type:"GET",                      #提交(请求)的方式
                data:{"username":user},          #向服务端发送数据(键值格式)
                success:function(data){         #回调函数;发送一个请求给服务端之后如果服务端成功返回了一个数据,将要执行的代码。     #date这个参数代表的是服务器端发送过来的数据。
                    data=JSON.parse(data);      #反序列化json字符串
                    if (data["flag"]){
                        var $spans=$("<span>");    #创建一个span标签
                        $spans.text("用户已存在");    #给span标签添加内容
                        $("p").append($spans)            #span标签作为子标签,追加到p标签中。
                    }
                }
            })
        });

    3、Views.py

    from app01.models import  *
    # Create your views here.
    import json
    def index(request):
        return render(request,"index.html")
    def ajaxHandle(request):
        if request.method=="POST":
            #HttpResponse.status_code=404  #老师一开始是这样写的可以试一试。代替下面两行
            obj=HttpResponse("OK")      #这一行和下一行都是在测试的时候用到。
            obj.status_code=404           #作用:模拟遇到错误,发送状态码。
            #return HttpResponse("OK")
            return obj
        username=request.GET.get("username")
        #user=Use.objectes.filter(username=username)
        ret={"flag":False}
        if username=="Yuan":
            ret["flag"]=True
        return HttpResponse(json.dumps(ret))

    jqXHR: jQuery增强的xhr。   xmlHttprequest.

    其实python中有很多事情都是围绕一个事情在做,比如loging模块围绕着一个logger对象进行操作;model围绕着model对象在做。

    Ajax围绕着一个对象来做,这个对象就是:xmlHttprequest,所有的信息都可以在这个里面去拿。比如错误信息,响应的内容等都在这个里面。

    //=================== error============
    这个函数是在整个流程中有报错时执行
                    error: function (jqXHR, textStatus, err) {
                            // jqXHR: jQuery增强的xhr (XmlHttpRequest)
                            // textStatus: 请求完成状态  (要么是success要么是error)
                            // err: 底层通过throw抛出的异常对象,值与错误类型有关
                            console.log(arguments);
                        },
     
    //=================== complete============
    不管整个流程有没有出错,都一定要执行。
                    complete: function (jqXHR, textStatus) {
                        // jqXHR: jQuery增强的xhr
                        // textStatus: 请求完成状态 success | error
                        console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                        console.log('textStatus: %s', textStatus);
                    },
     
                    //=================== statusCode============
                    statusCode: {
                        '403': function (jqXHR, textStatus, err) {
                            console.log(arguments);  //注意:后端模拟errror方式:
    HttpResponse.status_code=500   注意,这一条指令只是测试方法,在真实环境下只有真的遇到指定的状态码,才执行这里的代码
                         },
     
                        '400': function () {
                        }
                    }

    知识点回顾:

    <script>
        alert(foo(1,2,43,5,777));
        function foo() {
            console.log(arguments);
        }
    </script>
  • 相关阅读:
    python学习-33 max和min函数的高级使用
    XML--XSL
    XML--XML概览
    Linux|Zookeeper--CentOS7开机启动Zookeeper
    VMWare WorkStation15--Win10下开机启动虚拟机
    Zookeeper--命令介绍
    Zookeeper--复制模式安装
    Zookeeper--Zookeeper单机安装
    soupui--替换整个case的url
    Git--cherry-pick
  • 原文地址:https://www.cnblogs.com/linuxws/p/7519648.html
Copyright © 2011-2022 走看看