Django之ajax

json

定义：json（JavaScript Object Notation, JS 对象标记），是一种轻量级的数据交换格式。

它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JS类型的子集为json类型

json类型的几种类型：

　　　　　　　　　　1.数字类型

　　　　　　　　　　2.字符串类型

　　　　　　　　 3.布尔类型

　　　　　　　　　　 4.数组类型

　　　　　　　　　　 5.对象类型

　　　　　　　　　　 6.null

盗图解释一下json与js

举例合格的json对象

["lan","zhou"]
{"name":"lanbo","name":"ting"}
[{"name":"haha","name":"hehe"}]
举例不合格的json对象

{ name: "张三", 'age': 32 }                     // 属性名必须使用双引号

[32, 64, 128, 0xFFF] // 不能使用十六进制值

{ "name": "张三", "age": undefined }            // 不能使用undefined

{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}    // 不能使用函数和日期对象
}

stringfy与parse

这两个是在前段里面用的

json.parse(); 用于将一个json字符串转换为javascript对象

eg:

console.log(JSON.parse('{"name":"lanbo"}')); //这个是正确的

console.log(JSON.parse('{name:"lanbo"}')); //错误，因为反序列化的对象一定是一个json的字符串

console.log(JSON.parse('[12,undefined]')); //不能用undefined

json.stringfy(); //用于将javascript值装换为json字符串

console.log(JSON.stringify({'name':"lanbo"}));

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var d={'name':"alex"};
    var data=JSON.stringify(d);
     // stringify:js中的序列化
     console.log(data);
     console.log(typeof data );

    var ret=JSON.parse("null");
    console.log(ret);
    console.log(typeof ret);

</script>
</body>
</html>

ajax介绍

ajax中文意思就是“异步Javascript和XML”，也就是用javascript语言进行异步交互，

传输的数据为XML（传输的数据不只是XML）

同步交互：客户端发出一个请求后，需要等待服务器相应结束后，才能发出第二个请求；

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求；

ajax特点：

　　　　1.局部刷新

2.异步请求

js实现的局部刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .error{
            color:red
        }
    </style>
</head>
<body>


<form class="Form">

    <p>姓名  <input class="v1" type="text" name="username" mark="用户名"></p>
    <p>密码  <input class="v1" type="text" name="email" mark="邮箱"></p>
    <p><input type="submit" value="submit"></p>

</form>

<script src="jquery-3.1.1.js"></script>

<script>

    $(".Form :submit").click(function(){

        flag=true;

        $("Form .v1").each(function(){

            var value=$(this).val();
            if (value.trim().length==0){
                 var mark=$(this).attr("mark");
                 var $span=$("<span>");
                 $span.html(mark+"不能为空!");
                 $span.prop("class","error");
                 $(this).after($span);

                 setTimeout(function(){
                      $span.remove();
                 },800);

                 flag=false;
                 return flag;

            }
        });
        return flag
    });


</script>


</body>
</html>

jquery实现的ajax　

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>

<button class="send_Ajax">send_Ajax</button>

<script>
      //$.ajax的两种使用方式:

      //$.ajax(settings);
      //$.ajax(url,[settings]);


       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},

               success:function(data){
                   alert(data)
               },

                 //=================== error============

                error: function (jqXHR, textStatus, err) {

                        // jqXHR: jQuery增强的xhr
                        // textStatus: 请求完成状态
                        // 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>
</body>
</html>

ajax优缺点

优点：

AJAX使用Javascript技术向服务器发送异步请求；
AJAX无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

整体举例

urls中

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^ajax_handler/', views.ajax_handler),
    url(r'^cal/', views.cal),
    url(r'^jiaoyan_user/', views.jiaoyan_user),
]

views中

from django.shortcuts import render,HttpResponse,redirect
import json
# Create your views here.
def index(request):
    return render(request,"index.html")

def ajax_handler(request):
    return HttpResponse("安子")
def cal(request):
    num1=request.GET.get("num1")
    num2=request.GET.get("num2")
    ret=int(num1)+int(num2)
    return HttpResponse(ret)

def jiaoyan_user(request):
    response={"is_reg":True}
    user=request.POST.get("user")
    if user == "yuan":
      pass
    else:
        response["is_reg"]=False

    return HttpResponse(json.dumps(response))

　html中　

#index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>index</h3>
<button class="s1">send_ajax</button>
<p class="name"></p>
<hr>
<input type="text" id="n1">+<input type="text" id="n2">=<input type="text" id="he"><button class="cal">计算</button>
<hr >
{% csrf_token %}
<h4>校验用户名</h4>
<input type="text" id="user"><span></span>



<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
    $(function () {
        //ajax的无参请求
        $(".s1").click(function () {
        //触发ajax事件
            $.ajax({
                url:"/ajax_handler/",
                type:"get",
                success: function (data) {
                    console.log(data);
                    $(".name").html(data)
                }
            })
        })
    });
    $(".cal").click(function () {
        $.ajax({
            url:"/cal/",
            data:{"num1":$("#n1").val(),"num2":$("#n2").val()},
            success:function (data){
                console.log(data);
                $("#he").val(data)
    }
    })
    });

    $("#user").blur(function(){

        $.ajax({
            url:"/jiaoyan_user/",
            type:"post",
            data:{"user":$("#user").val(),
                "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
               success:function(data){
                console.log(data);
                   var data=JSON.parse(data);

                   if(data.is_reg){
                       $("#user").next().html("该用户已注册").css("color","red")
                   }
            }
        })
    })

</script>
</body>
</html>

ajax实现登录

需求：运行出现login界面，然后输入用户名和密码，去数据库查询，有的话就跳转到首页，错误就在后面报错

ps：数据库自己建（models中，记得配置mysqldb）

实现：注意在这里我出现的错误就是没有注册app01,但是有些创建方式是不需要，截图提示

urls中

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^login/', views.login),
]

views　

from django.shortcuts import render, HttpResponse, redirect
from app01 import models
# Create your views here.
import json


def login(request):
    if request.method=="POST":
        response = {"flag": True}
        user = request.POST.get("user")
        pwd = request.POST.get("pwd")
        user_obj = models.User.objects.filter(user=user, pwd=pwd)
        print(user_obj)
        if user_obj:
            pass
        else:
            response["flag"] = False
        return HttpResponse(json.dumps(response))
    return render(request, "login.html")


def index(request):
    return render(request, "index.html")

html中　　

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎来到首页</h1>
</body>
</html>




login.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}
<input type="text" name="user" class="ming">
<input type="password" name="pwd" class="mi">
<input type="submit" value="提交" id="anniu"><span id="n1">
    <script src="/static/jquery-3.2.1.min.js"></script>
<script>
    $("#anniu").click(function(){
        $.ajax({
            url:"/login/",
            type:"post",
            data:{
                "user":$(".ming").val(),
                "pwd":$(".mi").val(),
                 "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},

             success: function (data) {
                 console.log(data);
                 var data=JSON.parse(data);
                 if(data.flag){
                  location.href="/index/"
                 }else{
                     $("#n1").html("用户名或密码错误").css("color","red")
                 }

             }
        })
    })
</script>

</body>
</html>

粗略笔记，有待更新　

posted @ 2018-01-30 22:38 兰博~~ 阅读(128) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

博

Django之ajax

json

stringfy与parse

ajax介绍

jquery实现的ajax

ajax优缺点

优点：

整体举例

ajax实现登录

粗略笔记，有待更新

公告

jquery实现的ajax　

粗略笔记，有待更新　