day 74 json 和 ajax 的实例

一

json的定义:

json(JavaScript object notation,js对象标记)是一种轻量级的数据交换格式,它基于ecmascript(w3c指定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.

简介和清晰的层次结构使得json成为理想的数据交换语言,易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率

我们的json就是序列化用的,基于我们的网络传输的数据都是字符串,我们需要把所有的数据类型转换成字符串才可以进行传输,那么我们的json就是这样一个功能,它负责把所有的数据类型转换成字符串,然后进行传输,一边把数据打包成字符串传过去,对方接受之后把这些字符串再通过解包还原成他们原来的样子,

我们的json打包后的字符串是有固定格式的,如果我们的字符串满足这个格式的话,就不需要再打包了,直接使用我们的json解包即可得到该数据原本的样子.

那么我们的json字符串的固定格式是什么样子的呢?

Python 的序列化和反序列化

序列化 json.dumps(d) d 里面不需要满足都是双引号 数字 字符串 列表 字典 布尔值 None

import json

# d1= {'name':'alex'}

# d2 ={"name":"alex"}

# print(json.dumps(d1))

# print(json.dumps(d2))

# 外部的字符串符号省略

# {"name": "alex"}

# {"name": "alex"}

# 反序列化 json.loads(s)  s里面必须满足都是双引号 因为序列化出来的内部都是双引号

# s1= "{'name':'alex'}"

# s2 ='{"name":"alex"}'

# print(json.loads(s1),type(json.loads(s1)))

# 报错了  因为序列化出来的是内部字典内部是双引号 此时s1内部是单引号 不符合序列化的标准

# print(json.loads(s2),type(json.loads(s2)))

# {'name': 'alex'} <class 'dict'>

# b1 = None

# print(json.dumps(b1))

# null

# b2 = 'null'

# b3 = "null"

# print(json.loads(b2))

# print(json.loads(b3))

# 都行可以的

js序列化和反序列化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script src="/static/js/jquery-3.2.1.min.js"></script>

<script>

{#    var d1={'name':'alex'}#}

{#    var d2={"name":"wusir"}#}

{#    var d11=JSON.stringify(d1)#}

{#    var d22=JSON.stringify(d2)#}

{#    console.log(d11)#}

{#    console.log(d22)#}

   序列化

    {#{"name":"alex"}#}

    {#{"name":"wusir"}#}

反序列化

    {#var s1="{'name':'alex'}";#}

    {#var s2='{"name":"wusir"}';#}

    {#var s11=JSON.parse("{'name':'alex'}")#}

    var s22=JSON.parse('{"name":"wusir"}')

     {#console.log(s11)#}

    格式不对 报错

     console.log(s22)

    正常

</script>

</body>

</html>

ajax定义:

AJAX(Asynchronous Javascript And XML)

翻译成中文就是'异步JavaScript和XML',也就是使用JavaScript语言与服务器进行异步交互,传输的数据为XML(不仅仅局限于XML)，我们的ajax是基于我们的js语言来实现的功能.

我们的web请求,分为以下三种:

地址栏 url 直接输入地址即可得到相应的页面 get请求

超链接标签 get请求

form表单 get/post请求

ajax get/post请求

局部刷新：（在不刷新本页面的情况，对局部的某个标签进行处理）

我们举例来理解这的概念,在我们的其他的网站的登录注册页面里面,我们的用户名,密码,邮箱等信息不能为空的,但是我们如果为空,然后点击注册按钮的时候,input框周边会弹出提示信息,提示我们的输入不能为空,这个时候我们的点击事件并没有刷新我们的页面,但是我们确实真的刷新了,因为弹出的提示信息我们的输入的用户名已经存在,这很显然是我们的数据已经去到数据库里面过了一遍,这就是刷新的证据}我们在很多的朋友圈或者是微博里面或者是博客里面的时候,有点赞功能,我们的页面不会整个全局刷新,我们点击一下那个点赞的按钮之后看到有数据提交返回给浏览器,但是页面没有刷新都是因为我们的ajax在中间起到的作用

异步请求（同时做几件事情）

客户端发出一个请求后,无需等待服务器相应结束就可以发出第二个请求操作

我们在注册页面的时候里面有很多的input框,我们在输入的时候一个框输入完之后就紧接着输入第二个框,在这个过程中one by one,页面都不会刷新,

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ajax练习</title>

{#        引用css link 链接#}

    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">

</head>

<body>

{#实例一html#}

<button class="s1">send_ajax</button>

<span>我是index页面</span>

<p class="name"></p>

{#实例二html#}

<input type="text" id="n1">+<input type="text" id="n2">=<input type="text" id="n3"><button class="sum">计算</button>

{#实例三html#}

{#这里设置下边ajaxd的data 要从这里取值的必xe#}

{% csrf_token %}

<h4>用户登录校验</h4>

<div>用户名：<input type="text" id="user"><span id="err"></span></div>

{#在线引用jQuery cdn#}

{#<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>#}

{#本地引用js#}

<script src="/static/js/jquery-3.2.1.min.js"></script>

{#ajax 通过另一个视图函数返回的数据#}

<script>

    {#简单的实例一 text 取值#}

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

        $.ajax({

            url: "/ajax_handle/",

            type: "get",

            success: function (data) {

                console.log(data);

                {#通过另个视图函数返回值给本页面的数据#}

                $(".name").text(data)

            }

        })

    });

{#实例二求和注意一下 标签之间的内容text取值可以是.text()或者是.html()  但是如果是标签的value的话就是.val()#}

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

    $.ajax({

        url:"/ajax_sum/",

        data:{'num1':$("#n1").val(),'num2':$("#n2").val()},

        success:function (data) {

            console.log(data);

            $("#n3").val(data)

        }

    })

});

{#实例三传参数如果是post 的时候data的字典中必须配置中间件的键值对 注意中间件的是个val()}#}

{#    序列化  JSON.stringify()#}

{#    反序列化 JSON.parse()#}

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

    $.ajax({

        url:"/jiaoyan_user/",

        type:'post',

        {#针对post请求 不注释csrftoken ,必须有个键值对 中间件：中间件的值#}

        data:{'user':$('#user').val(),

             'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val()},

        {#data:{"user":$("#user").val(),#}

        {#     "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},#}

        success:function (data) {

            var data1=JSON.parse(data);

            console.log(data1);

            if(data1.is_reg) {

                 $('#err').html('用户名已注册').css('color',"red");

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

            }

            }

        })

    })

</script>

</body>

</html>

def ajax_handle(request):

    return HttpResponse('王岩罗丹')

def ajax_sum(request):

    #以下取值是按照前面的data 键值对取值

    num1 = request.GET.get("num1")

    num2 = request.GET.get("num2")

    ret = int(num1)+int(num2)

    return HttpResponse(str(ret))  #只能返回字符串

验证登录的实例url

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^login/', views.login),

    url(r'^index/', views.index),

    url(r'^ajax_yanzheng/',views.ajax_yanzheng),

]

验证登录的html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h1>登陆成功</h1>

</body>

</html> 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录</title>

</head>

<form action="" method="post">

    {% csrf_token %}

    用户名：<input type="text"name="user" id="user1">

    密码：<input type="password"name="pwd"id="pwd1">

    <input type="button"value="登录" class="button" ><span class="err"></span>

</form>

<body>

{#<script src="/static/js/jquery-3.2.1.min.js"></script>#}

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<script>

  $(function () {

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

          {#排错 第一步此时找相对应的 标签的id 或者是class#}

          var name = $('#user1').val();

          var pwd= $('#pwd1').val();

          var midd = $('[name="csrfmiddlewaretoken"]').val();

          console.log(name,pwd)

          $.ajax({

              url:"/ajax_yanzheng/",

              type:"POST",

              {#排错第二步找第一步var name pwd#}

              data:{

                  "user": name,

                  "pwd": pwd,

                  "csrfmiddlewaretoken": midd

              },

              success:function (data) {

                  console.log(data);

                  var data1= JSON.parse(data);

                  {#data1 反序列化是个对象#}

                  console.log(data1);

                  if (data1.name_pwd){

                      location.href='/index/'

                  }else {

                      $(".err").text('用户名或者密码错误').css('color','red')

                  }

              }

          })

      })

  });

</script>

</body>

</html>

验证登录的views

from django.shortcuts import render,HttpResponse

from app01 import models

import json

# Create your views here.

def login(request):

   return render(request,'login.html')

def ajax_yanzheng(request):

    res = {'name_pwd': True}

    usera = request.POST.get('user')  #排错第三步找第二步data

    pwda = request.POST.get('pwd')   #排错第三步找第二步data

    # print(usera,pwda)

    ret = models.User.objects.filter(name=usera, pwd=pwda).first()

    # 如果是 ret = models.User.objects.filter(name=usera, pwd=pwda) 没有就是空列表也是一样的

    # print(ret)

    # print("*"*100)

    if ret:

        pass

    else:

        res['name_pwd'] = False

    return HttpResponse(json.dumps(res))

def index(request):

    return render(request,'index.html')

验证登录的settings

"""

Django settings for denglu project.

Generated by 'django-admin startproject' using Django 1.11.9.

For more information on this file, see

https://docs.djangoproject.com/en/1.11/topics/settings/

For the full list of settings and their values, see

https://docs.djangoproject.com/en/1.11/ref/settings/

"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Quick-start development settings - unsuitable for production

# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY = 'su7%!ibpt_(5dl6#it*p+_uv7yqd9nin12!ynsww1t)ac_ffa_'

# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'app01.apps.App01Config',

    #这里注意后建的几个app 这里在这里设置

]

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',

    'django.contrib.sessions.middleware.SessionMiddleware',

    'django.middleware.common.CommonMiddleware',

    'django.middleware.csrf.CsrfViewMiddleware',

    'django.contrib.auth.middleware.AuthenticationMiddleware',

    'django.contrib.messages.middleware.MessageMiddleware',

    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

ROOT_URLCONF = 'denglu.urls'

TEMPLATES = [

    {

        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        'DIRS': [os.path.join(BASE_DIR, 'templates')]

        ,

        'APP_DIRS': True,

        'OPTIONS': {

            'context_processors': [

                'django.template.context_processors.debug',

                'django.template.context_processors.request',

                'django.contrib.auth.context_processors.auth',

                'django.contrib.messages.context_processors.messages',

            ],

        },

    },

]

WSGI_APPLICATION = 'denglu.wsgi.application'

# Database

# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

# DATABASES = {

#     'default': {

#         'ENGINE': 'django.db.backends.sqlite3',

#         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),

#     }

# }

DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.mysql',

        'USER': "root",

        'NAME':"denglu",

        'PASSWORD': "",

        'PORT': "3306 ",

        'HOST': "127.0.0.1",

    }

}

# Password validation

# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [

    {

        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',

    },

    {

        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',

    },

    {

        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',

    },

    {

        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',

    },

]

# Internationalization

# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)

# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIR = [

    os.path.join(BASE_DIR, "static")

]

巴特西

day 74 json 和 ajax 的实例

最新文章

热门文章