day 74 json 和 ajax 的實例

時間  2019-11-10
標籤 day json ajax 實例 欄目 JavaScript 简体版
原文   原文鏈接

 一css

 

json的定義:html

json(JavaScript object notation,js對象標記)是一種輕量級的數據交換格式,它基於ecmascript(w3c指定的js規範)的一個子集,採用徹底獨立於編程語言的文本格式來存儲和表示數據.mysql

簡介和清晰的層次結構使得json成爲理想的數據交換語言,易於人閱讀和編寫,同時也易於機器解析和生成,並有效地提高網絡傳輸效率jquery

 

 

咱們的json就是序列化用的,基於咱們的網絡傳輸的數據都是字符串,咱們須要把全部的數據類型轉換成字符串才能夠進行傳輸,那麼咱們的json就是這樣一個功能,它負責把全部的數據類型轉換成字符串,而後進行傳輸,一邊把數據打包成字符串傳過去,對方接受以後把這些字符串再經過解包還原成他們原來的樣子,web

咱們的json打包後的字符串是有固定格式的,若是咱們的字符串知足這個格式的話,就不須要再打包了,直接使用咱們的json解包便可獲得該數據本來的樣子.ajax

那麼咱們的json字符串的固定格式是什麼樣子的呢?sql

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序列化和反序列化django

<!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': "123456",
        '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")
]
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程