初始Ajax

一、Ajax准备知识：json

说起json，我们大家都了解，就是python中的json模块，那么json模块具体是什么呢？那我们现在详细的来说明一下

1、json(Javascript Obiect Notation,JS对象标记)是一种轻量级的数据交换格式。

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

2、json其实是从js中拿出来的一个对象，也可以说json是js的一个子集。

需要知道的：json的格式来源于js的格式

1、js支持单引号，也支持双引号，也可以没有引号

 //在js中吧{}这样的类型叫做对象，js中没有字典一说
data = {
    'name':'haiyan',
    "name":"haiyan",
     name:"haiyan"        
}     //js对象默认会把自己的键当成字符串处理，所以可以加引号也可以不加

2、json的格式：

1、json只认双引号的
2、json一定是一个字符串  因为你的字典形式的type也是str类型的

3、下面我们看看哪些是合格的字符串，那些不是？

合格的json对象：

1 ["one", "two", "three"]
2 
3 { "one": 1, "two": 2, "three": 3 }
4 
5 {"names": ["张三", "李四"] }
6 
7 [ { "name": "张三"}, {"name": "李四"} ]

合格的json对象

 1 { name: "张三", 'age': 32 }                     // 属性名必须使用双引号
 2 
 3 [32, 64, 128, 0xFFF] // 不能使用十六进制值
 4 
 5 { "name": "张三", "age": undefined }            // 不能使用undefined
 6 
 7 { "name": "张三",
 8   "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
 9   "getName":  function() {return this.name;}    // 不能使用函数和日期对象
10 }

不合格的json对象

其实json就是把你的内容转化为字符串然后进行网络之间的信息传播因为网络之间的传递只能传播字符串并且json可以用于语言之间的内容传递因为json不仅仅是某一种语言的它支持很多语言比如你的java想要和我的python发送信息交互就需要json来进行交互

什么是Ajax？

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

1、简单介绍

我们以前知道的前端向后端发送数据的方式有：

　　GET：地址栏、a标签、Form表单

　　POST：Form表单

那么现在我们在学习一种：那就是ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

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

Ajax的特点：

　　异步交互：　当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！（不需要等待你的上面的完成才能执行下面的内容）

　　局部刷新：整个过程中页面没有刷新，只是刷新页面中的局部位置而已！（不用再此刷新你的的全局的页面）

ajax：也是前端向后端发送数据的一种方式

    <title>Document</title>
    <script src = 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js'></script>
</head>
<body>
<button class="btn">click</button>
<script>
    $('.btn').click(function(){
        $.ajax({
            {##}
            url:'/nice/',   {#你接下来要请求的路径#}
            type:'get',  {#请求的类型 是get还是post#}
            success:function(data){   {#这个是请求完成之后执行的回掉函数  然后data是你接受完成后传递回来的内容 就是形参 #}
                console.log(data)
            }
        })
    })
</script>

</body>

urls:

from django.contrib import admin
from django.urls import path
from first import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/',views.index),
    path('nice/',views.nice)
]



views:

from django.shortcuts import render,HttpResponse

# Create your views here.


def index(request):


    return render(request,'index.html')


def nice(request):
    return HttpResponse('6666')



index:


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src = 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js'></script>
</head>
<body>
<button class="btn">click</button>
<p class="con"></p>
<script>
    $('.btn').click(function(){
        $.ajax({
            {##}
            url:'/nice/',   {#你接下来要请求的路径#}
            type:'get',  {#请求的类型 是get还是post#}
            success:function(data){   {#这个是请求完成之后执行的回掉函数  然后data是你接受完成后传递回来的内容 就是形参 #}
                console.log(data);
                $('.con').html(data).css('color','red');  {#z=这一步是把你的接受过来的内容给传递进你的p标签内#}
            }
        })
    })
</script>

</body>
</html>

一个简单的django和ajax的请求流程

一、Ajax准备知识：json

什么是Ajax？

猜你喜欢