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))
