一、准备知识
什么是json？
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript(w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
合格的json对象：
["one", "two", "three"]{"one": 1, "two": 2, "three": 3}{"names": ["张三", "李四"] }[{ "name": "张三"}, {"name": "李四"}]不合格的json对象：
{ name: "张三", ‘age‘: 32 } ?# 属性名必须使用双引号[32, 64, 128, 0xFFF] ?# 不能使用十六进制值{ "name": "张三", "age": undefined } ?# 不能使用undefined{ "name": "张三", ?"birthday": new Date(‘Fri, 26 Aug 2011 07:13:10 GMT‘), ?"getName": ?function() {return this.name;} ?# 不能使用函数和日期对象}stringify与parse方法
JavaScript中关于JSON对象和字符串转换的两个方法：
JSON.parse()：用于将一个 JSON 字符串转换为 JavaScript 对象
JSON.parse(‘{"name":"pd"}‘);JSON.parse(‘{name:"pd"}‘); ?# 错误JSON.parse(‘[18,undefined]‘); ?# 错误JSON.stringify()：用于将 JavaScript 值转换为 JSON 字符串
JSON.stringify({"name":"pd"})二、Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是"异步Javascript和XML"。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，现在更多使用json数据）
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受就是在不知不觉中完成了请求和响应过程）
场景：
优点：
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面
- 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高
jQuery实现Ajax示例：
<!DOCTYPE html><html lang="zh-cn"><head> ???<meta charset="UTF-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<meta name="viewport" content="width=device-width, initial-scale=1"> ???<title>ajax_demo</title></head><body><input type="text" id="i1">+<input type="text" id="i2">=<input type="text" id="i3"><button type="submit" id="btn">提交</button><script type="text/javascript" src="/static/jquery-3.3.1.min.js"></script><script> ???$("#btn").on("click", function () { ???????var i1 = $("#i1").val(); ???????var i2 = $("#i2").val(); ???????$.ajax({ ???????????url:"/ajax_add/", ???????????type: "GET", ???????????data: {"i1": i1, "i2": i2}, ???????????success:function (ret) { ???????????????$("#i3").val(ret) ???????????} ???????}) ???})</script></body></html>def ajax_demo(request): ???return render(request, "ajax_demo.html")def ajax_add(request): ???i1 = request.GET.get("i1") ???i2 = request.GET.get("i2") ???ret = int(i1) + int(i2) ???return HttpResponse(ret)url(r"^ajax_demo/$", views.ajax_demo),url(r"^ajax_add/$", views.ajax_add),
三、jQuery实现的Ajax
data参数中的键值对，如果值不为字符串，则需要将其装换成字符串类型；如："hehe": JSON.stringify([1, 2, 3])
<script> ???$("").click(function () { ???????$.ajax({ ???????????url: "/test/", ???????????type: "POST", ???????????data: {username: "pd", password: 123}, ???????????success: function (data) { ???????????????alert(data) ???????????}, ???????????// ---------- error ---------- ???????????error: function (jqXHR, textStatus, err) { ???????????????// jqXHR: jQuery增强的xhr ???????????????// textStatus: 请求完成状态 ???????????????// err: 底层通过throw抛出的异常对象，值与错误类型有关 ???????????????console.log(arguments); ???????????}, ???????????// ---------- complete ---------- ???????????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 (jqXHR, textStatus, err) { ???????????????????console.log(arguments); ???????????????} ???????????} ???????}) ???})</script>1
Ajax
原文地址：https://www.cnblogs.com/believepd/p/9920537.html