json的用法
在python中json的用法:序列化 json.dumps() 反序列化 json.loads()
在js中,序列化json.stringfy() 反序列化 json.parse()
AJAX简介
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
语法
#通常放在事件当中
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>#引用jquery的cookie用法
$("button").click(function () {
$.ajax({
{# 请求url#}
url:"/send_ajax/",
{# 请求方式#}
type:"get",
data{
name:"wate",
csrfmiddlewaretoken:$.cookie("csrftoken"),#这种方式需要引入cookie
csfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()#跨站请求伪造
},
sucess:function(data){#data为视图中返回的字符串#}
{
alert("ok")
},
error: function (jqXHR, textStatus, err) { // jqXHR: jQuery增强的xhr // textStatus: 请求完成状态 // err: 底层通过throw抛出的异常对象,值与错误类型有关 console.log(arguments); },
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 () { } }
}) })
实例
view.py
from django.shortcuts import render,HttpResponse
# Create your views here.
def send_ajax(request):
return HttpResponse("wate")
def index(request):
return render(request,"index.html")
urls.py
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^send_ajax/', views.send_ajax),
]
index.xml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> </head> <body> <button>sendajax</button><span class="error"></span> <script> $("button").click(function () { $.ajax({ {# 请求url#} url:"/send_ajax/", {# 请求方式#} type:"get", {# data是send)ajax HttpResponse的内容#} success:function(data) { $(".error").html(data) } }) }) </script> </body> </html>
contentType设置以什么编码方式
######################------------contentType---------################ contentType:默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 用来指明当前请求的数据编码格式;urlencoded:?a=1&b=2;如果想以其他方式提交数据, 比如contentType:"application/json",即向服务器发送一个json字符串: $.ajax("/ajax_get",{ data:JSON.stringify({ a:22, b:33 }), contentType:"application/json", type:"POST", }); //{a: 22, b: 33} 注意:contentType:"application/json"一旦设定,data必须是json字符串,不能是json对象 views.py: json.loads(request.body.decode("utf8"))
给sendajax按钮绑定点击事件,然后利用ajax给发送请求到后端函数中,并从后端获取返回值赋给data。
计算实例
index.xml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> </head> <body> <button>sendajax</button><span class="error"></span> <p><input type="text" name="num_one" class="num1">+<input type="text" name="num_two" class="num2">=<input type="text" class="value_num"><button class="add">计算</button></p> <script> $(".add").click(function () { $.ajax({ {# 请求url#} url:"/send_ajax/", {# 请求方式#} type:"get", {#data 给后端传值,后端通过request.GET.get("num_one")获取这里的值#} data:{ "num_one":$(".num1").val(), "num_two":$(".num2").val(), }, success:function(data) { $(".value_num").val(data) } }) }) </script> </body> </html>
view.py
def send_ajax(request): x=request.GET.get("num_one") y=request.GET.get("num_two") ret=int(x)+int(y) return HttpResponse(str(ret))