<div id="main">
<div id="mainContent">
<div class="forFlow">
<div id="post_detail">
<!--done-->
<div id="topics">
<div class="post">
<h1 class="postTitle">
<a id="cb_post_title_url" class="postTitle2" href="https://www.cnblogs.com/Dominic-Ji/p/9234099.html">AJAX</a>
</h1>
<div class="clear"></div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body ">
<h1>AJAX准备知识：JSON</h1>
<h2>什么是 JSON ？</h2>
<ul>
<li>JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）</li>
<li>JSON 是轻量级的文本数据交换格式</li>
<li>JSON 独立于语言 <span class="marked">*</span></li>
<li>JSON 具有自我描述性，更易理解</li>
</ul>
<p><span class="marked">* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。</span></p>
<p> 啥都别多说了，上图吧！</p>
<p><img src="https://images2018.cnblogs.com/blog/1342004/201806/1342004-20180627141602223-599696124.png" alt=""></p>
<p>合格的json对象(json只认双引的字符串格式)：</p>
<div class="cnblogs_code">
<pre>[<span style="color: #800000;">"</span><span style="color: #800000;">one</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">two</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">three</span><span style="color: #800000;">"</span><span style="color: #000000;">]
{ </span><span style="color: #800000;">"</span><span style="color: #800000;">one</span><span style="color: #800000;">"</span>: <span style="color: #800080;">1</span>, <span style="color: #800000;">"</span><span style="color: #800000;">two</span><span style="color: #800000;">"</span>: <span style="color: #800080;">2</span>, <span style="color: #800000;">"</span><span style="color: #800000;">three</span><span style="color: #800000;">"</span>: <span style="color: #800080;">3</span><span style="color: #000000;"> }
{</span><span style="color: #800000;">"</span><span style="color: #800000;">names</span><span style="color: #800000;">"</span>: [<span style="color: #800000;">"</span><span style="color: #800000;">张三</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">李四</span><span style="color: #800000;">"</span><span style="color: #000000;">] }
[ { </span><span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">张三</span><span style="color: #800000;">"</span>}, {<span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">李四</span><span style="color: #800000;">"</span>} ] </pre>
</div>
<p>不合格的json对象：</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div>
<pre>{ name: <span style="color: #800000;">"</span><span style="color: #800000;">张三</span><span style="color: #800000;">"</span>, <span style="color: #800000;">'</span><span style="color: #800000;">age</span><span style="color: #800000;">'</span>: <span style="color: #800080;">32</span> } <span style="color: #008000;">//</span><span style="color: #008000;"> 属性名必须使用双引号</span>
[<span style="color: #800080;">32</span>, <span style="color: #800080;">64</span>, <span style="color: #800080;">128</span>, <span style="color: #800080;">0xFFF</span>] <span style="color: #008000;">//</span><span style="color: #008000;"> 不能使用十六进制值</span>
{ <span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">张三</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">age</span><span style="color: #800000;">"</span>: undefined } <span style="color: #008000;">//</span><span style="color: #008000;"> 不能使用undefined</span>
{ <span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">张三</span><span style="color: #800000;">"</span><span style="color: #000000;">,
</span><span style="color: #800000;">"</span><span style="color: #800000;">birthday</span><span style="color: #800000;">"</span>: <span style="color: #0000ff;">new</span> Date(<span style="color: #800000;">'</span><span style="color: #800000;">Fri, 26 Aug 2011 07:13:10 GMT</span><span style="color: #800000;">'</span><span style="color: #000000;">),
</span><span style="color: #800000;">"</span><span style="color: #800000;">getName</span><span style="color: #800000;">"</span>: function() {<span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.name;} <span style="color: #008000;">//</span><span style="color: #008000;"> 不能使用函数和日期对象</span>
}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div></div>
<h2 id="jsonstringify">stringify与parse方法</h2>
<p>JavaScript中关于JSON对象和字符串转换的两个方法：</p>
<p>JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(<span style="color: #ff0000;">json只认双引的字符串格式</span>)</p>
<div class="cnblogs_code">
<pre>JSON.parse(<span style="color: #800000;">'</span><span style="color: #800000;">{"name":"Howker"}</span><span style="color: #800000;">'</span><span style="color: #000000;">);
JSON.parse(</span><span style="color: #800000;">'</span><span style="color: #800000;">{name:"Stack"}</span><span style="color: #800000;">'</span>) ; <span style="color: #008000;">//</span><span style="color: #008000;"> 错误</span>
JSON.parse(<span style="color: #800000;">'</span><span style="color: #800000;">[18,undefined]</span><span style="color: #800000;">'</span>) ; <span style="color: #008000;">//</span><span style="color: #008000;"> 错误</span></pre>
</div>
<p>JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。</p>
<div class="cnblogs_code">
<pre>JSON.stringify({<span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>:<span style="color: #800000;">"Tonny</span><span style="color: #800000;">"</span>})</pre>
</div>
<p> </p>
<h2 class="title-text">和XML的比较</h2>
<p>JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。</p>
<p>JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。</p>
<p>XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较。</p>
<p>用XML表示中国部分省市数据如下：</p>
<div class="cnblogs_code" onclick="cnblogs_code_show('39f6126a-27cd-4837-ad8c-7068b385921a')"><img id="code_img_closed_39f6126a-27cd-4837-ad8c-7068b385921a" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_39f6126a-27cd-4837-ad8c-7068b385921a" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('39f6126a-27cd-4837-ad8c-7068b385921a',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_39f6126a-27cd-4837-ad8c-7068b385921a" class="cnblogs_code_hide">
<pre><?xml version=<span style="color: #800000;">"</span><span style="color: #800000;">1.0</span><span style="color: #800000;">"</span> encoding=<span style="color: #800000;">"</span><span style="color: #800000;">utf-8</span><span style="color: #800000;">"</span>?>
<country>
<name>中国</name>
<province>
<name>黑龙江</name>
<cities>
<city>哈尔滨</city>
<city>大庆</city>
</cities>
</province>
<province>
<name>广东</name>
<cities>
<city>广州</city>
<city>深圳</city>
<city>珠海</city>
</cities>
</province>
<province>
<name>台湾</name>
<cities>
<city>台北</city>
<city>高雄</city>
</cities>
</province>
<province>
<name>新疆</name>
<cities>
<city>乌鲁木齐</city>
</cities>
</province>
</country></pre>
</div>
<span class="cnblogs_code_collapse">XML格式数据</span></div>
<p>用JSON表示如下：</p>
<div class="cnblogs_code" onclick="cnblogs_code_show('e6d8a632-9896-4085-859a-e918e8710a60')"><img id="code_img_closed_e6d8a632-9896-4085-859a-e918e8710a60" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_e6d8a632-9896-4085-859a-e918e8710a60" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('e6d8a632-9896-4085-859a-e918e8710a60',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_e6d8a632-9896-4085-859a-e918e8710a60" class="cnblogs_code_hide">
<pre><span style="color: #000000;">{
</span><span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">中国</span><span style="color: #800000;">"</span><span style="color: #000000;">,
</span><span style="color: #800000;">"</span><span style="color: #800000;">province</span><span style="color: #800000;">"</span><span style="color: #000000;">: [{
</span><span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">黑龙江</span><span style="color: #800000;">"</span><span style="color: #000000;">,
</span><span style="color: #800000;">"</span><span style="color: #800000;">cities</span><span style="color: #800000;">"</span><span style="color: #000000;">: {
</span><span style="color: #800000;">"</span><span style="color: #800000;">city</span><span style="color: #800000;">"</span>: [<span style="color: #800000;">"</span><span style="color: #800000;">哈尔滨</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">大庆</span><span style="color: #800000;">"</span><span style="color: #000000;">]
}
}, {
</span><span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">广东</span><span style="color: #800000;">"</span><span style="color: #000000;">,
</span><span style="color: #800000;">"</span><span style="color: #800000;">cities</span><span style="color: #800000;">"</span><span style="color: #000000;">: {
</span><span style="color: #800000;">"</span><span style="color: #800000;">city</span><span style="color: #800000;">"</span>: [<span style="color: #800000;">"</span><span style="color: #800000;">广州</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">深圳</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">珠海</span><span style="color: #800000;">"</span><span style="color: #000000;">]
}
}, {
</span><span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">台湾</span><span style="color: #800000;">"</span><span style="color: #000000;">,
</span><span style="color: #800000;">"</span><span style="color: #800000;">cities</span><span style="color: #800000;">"</span><span style="color: #000000;">: {
</span><span style="color: #800000;">"</span><span style="color: #800000;">city</span><span style="color: #800000;">"</span>: [<span style="color: #800000;">"</span><span style="color: #800000;">台北</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">高雄</span><span style="color: #800000;">"</span><span style="color: #000000;">]
}
}, {
</span><span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">新疆</span><span style="color: #800000;">"</span><span style="color: #000000;">,
</span><span style="color: #800000;">"</span><span style="color: #800000;">cities</span><span style="color: #800000;">"</span><span style="color: #000000;">: {
</span><span style="color: #800000;">"</span><span style="color: #800000;">city</span><span style="color: #800000;">"</span>: [<span style="color: #800000;">"</span><span style="color: #800000;">乌鲁木齐</span><span style="color: #800000;">"</span><span style="color: #000000;">]
}
}]
}</span></pre>
</div>
<span class="cnblogs_code_collapse">JSON格式数据</span></div>
<p>由上面的两端代码可以看出，JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽。</p>
<h1 class="p1">AJAX简介</h1>
<p class="p2"><span class="s1">AJAX<span class="s3">（<span class="s1">Asynchronous Javascript And XML<span class="s3">）翻译成中文就是<span class="s1">“<span class="s3">异步的<span class="s1">Javascript<span class="s3">和<span class="s1">XML”<span class="s3">。即使用<span class="s1">Javascript<span class="s3">语言与服务器进行异步交互，传输的数据为<span class="s1">XML<span class="s3">（当然，传输的数据不只是<span class="s1">XML<span class="s3">）。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p>AJAX 不是新的编程语言，而是一种使用现有标准的新方法。</p>
<p>AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（<span class="s4">这一特点给用户的感受是在不知不觉中完成请求和响应过程）</span></p>
<p>AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。</p>
<ul>
<li class="li2"><span class="s3">同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；</span></li>
<li class="li3"><span class="s3">异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。</span></li>
</ul>
<h3 class="p3"><strong>示例</strong></h3>
<p><strong><strong><span class="s4">页面输入两个整数，通过AJAX传输到后端计算出结果并返回。</span></strong></strong></p>
<div class="cnblogs_code" onclick="cnblogs_code_show('898baf3c-aa46-49a2-af49-d9f4eaccdd6f')"><img id="code_img_closed_898baf3c-aa46-49a2-af49-d9f4eaccdd6f" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_898baf3c-aa46-49a2-af49-d9f4eaccdd6f" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('898baf3c-aa46-49a2-af49-d9f4eaccdd6f',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_898baf3c-aa46-49a2-af49-d9f4eaccdd6f" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang=<span style="color: #800000;">"</span><span style="color: #800000;">en</span><span style="color: #800000;">"</span>>
<head>
<meta charset=<span style="color: #800000;">"</span><span style="color: #800000;">UTF-8</span><span style="color: #800000;">"</span>>
<title>Title</title>
<meta name=<span style="color: #800000;">"</span><span style="color: #800000;">viewport</span><span style="color: #800000;">"</span> content=<span style="color: #800000;">"</span><span style="color: #800000;">width=device-width, initial-scale=1</span><span style="color: #800000;">"</span>>
</head>
<body>
<input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">i1</span><span style="color: #800000;">"</span>> + <input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">i2</span><span style="color: #800000;">"</span>> = <input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">i3</span><span style="color: #800000;">"</span>>
<button id=<span style="color: #800000;">"</span><span style="color: #800000;">b1</span><span style="color: #800000;">"</span>>Ajax Test</button>
<script src=<span style="color: #800000;">"</span><span style="color: #800000;">/static/jquery-3.3.1.min.js</span><span style="color: #800000;">"</span>></script>
<script><span style="color: #000000;">
$(</span><span style="color: #800000;">'</span><span style="color: #800000;">#b1</span><span style="color: #800000;">'</span><span style="color: #000000;">).click(function () {
$.ajax({
url:</span><span style="color: #800000;">''</span><span style="color: #000000;">,
type:</span><span style="color: #800000;">'</span><span style="color: #800000;">POST</span><span style="color: #800000;">'</span><span style="color: #000000;">,
data:{i1:$(</span><span style="color: #800000;">'</span><span style="color: #800000;">#i1</span><span style="color: #800000;">'</span>).val(),i2:$(<span style="color: #800000;">'</span><span style="color: #800000;">#i2</span><span style="color: #800000;">'</span><span style="color: #000000;">).val()},
success:function (data) {
$(</span><span style="color: #800000;">'</span><span style="color: #800000;">#i3</span><span style="color: #800000;">'</span><span style="color: #000000;">).val(data)
}
})
})
</span></script>
</body>
</html></pre>
</div>
<span class="cnblogs_code_collapse">HTML部分代码</span></div>
<div class="cnblogs_code" onclick="cnblogs_code_show('e35d3cad-d3c0-4612-b51e-81abede000b3')"><img id="code_img_closed_e35d3cad-d3c0-4612-b51e-81abede000b3" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_e35d3cad-d3c0-4612-b51e-81abede000b3" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('e35d3cad-d3c0-4612-b51e-81abede000b3',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_e35d3cad-d3c0-4612-b51e-81abede000b3" class="cnblogs_code_hide">
<pre><span style="color: #000000;">def ajax_test(request):
</span><span style="color: #0000ff;">if</span> request.method==<span style="color: #800000;">'</span><span style="color: #800000;">POST</span><span style="color: #800000;">'</span><span style="color: #000000;">:
i1</span>=request.POST.<span style="color: #0000ff;">get</span>(<span style="color: #800000;">'</span><span style="color: #800000;">i1</span><span style="color: #800000;">'</span><span style="color: #000000;">)
i2</span>=request.POST.<span style="color: #0000ff;">get</span>(<span style="color: #800000;">'</span><span style="color: #800000;">i2</span><span style="color: #800000;">'</span><span style="color: #000000;">)
ret</span>=<span style="color: #0000ff;">int</span>(i1)+<span style="color: #0000ff;">int</span><span style="color: #000000;">(i2)
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> HttpResponse(ret)
</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">'</span><span style="color: #800000;">ajax_test.html</span><span style="color: #800000;">'</span>)</pre>
</div>
<span class="cnblogs_code_collapse">views.py</span></div>
<div class="cnblogs_code" onclick="cnblogs_code_show('32f49bb6-db13-4d56-85b7-ab483b5abd9a')"><img id="code_img_closed_32f49bb6-db13-4d56-85b7-ab483b5abd9a" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_32f49bb6-db13-4d56-85b7-ab483b5abd9a" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('32f49bb6-db13-4d56-85b7-ab483b5abd9a',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_32f49bb6-db13-4d56-85b7-ab483b5abd9a" class="cnblogs_code_hide">
<pre><span style="color: #0000ff;">from</span><span style="color: #000000;"> django.conf.urls import url
</span><span style="color: #0000ff;">from</span><span style="color: #000000;"> app01 import views
urlpatterns</span>=<span style="color: #000000;">[
url(r</span><span style="color: #800000;">'</span><span style="color: #800000;">^ajax_test/</span><span style="color: #800000;">'</span><span style="color: #000000;">,views.ajax_test),
]</span></pre>
</div>
<span class="cnblogs_code_collapse">urls.py</span></div>
<h2 class="p1"><span class="s1"><span class="s2"><span class="s1"><strong>AJAX</strong><span class="s2"><strong>常见应用情景</strong></span></span></span></span></h2>
<p class="p1">搜索引擎根据用户输入的关键字，自动提示检索关键字。</p>
<p class="p1">还有一个很重要的应用场景就是注册时候的用户名的查重。</p>
<p class="p1"><span class="s1">其实这里就使用了<span class="s2">AJAX<span class="s1">技术！当文件框发生了输入变化时，使用<span class="s2">AJAX<span class="s1">技术向服务器发送一个请求，<span class="s2"><span class="s1"><span class="s2"><span class="s1"><span class="s2"><span class="s1">然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来<span class="s2"><span class="s1">。</span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<ul>
<li class="li2"><span class="s3">整个过程中页面没有刷新，只是刷新页面中的局部位置而已！</span></li>
<li class="li2"><span class="s3">当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！</span></li>
</ul>
<p><span class="s3"><img src="https://images2018.cnblogs.com/blog/1342004/201806/1342004-20180627142808460-58688385.png" alt=""></span></p>
<p class="p1"><span class="s1">当输入用户名后，把光标移动到其他表单项上时，浏览器会使用<span class="s2">AJAX<span class="s1">技术向服务器发出请求，服务器会查询名为lemontree7777777<span class="s2"><span class="s1">的用户是否存在，最终服务器返回<span class="s2">true<span class="s1">表示名为lemontree7777777<span class="s2"><span class="s1">的用户已经存在了，浏览器在得到结果后显示<span class="s2">“<span class="s1">用户名已被注册！<span class="s2">”<span class="s1">。</span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<ul>
<li class="li2"><span class="s3">整个过程中页面没有刷新，只是局部刷新了；</span></li>
<li class="li2"><span class="s3">在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；</span></li>
</ul>
<h2 class="p1"><span class="s1"><span class="s2"><span class="s1"><strong>AJAX</strong><span class="s2"><strong>的优缺点</strong></span></span></span></span></h2>
<h4 class="p2"><span class="s1">优点：</span></h4>
<ul>
<li class="li2"><span class="s3"><span class="s4">AJAX<span class="s1">使用<span class="s4">JavaScript<span class="s1">技术向服务器发送异步请求；</span></span></span></span></span></li>
<li class="li2"><span class="s3"><span class="s4">AJAX请求<span class="s1">无须刷新整个页面；</span></span></span></li>
<li class="li2"><span class="s3"><span class="s1">因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以<span class="s4">AJAX<span class="s1">性能高； </span></span></span></span></li>
<li class="li2"><span class="s3">两个关键点:1.局部刷新，2.异步请求</span></li>
</ul>
<h1>jQuery实现的AJAX</h1>
<p>最基本的jQuery发送AJAX请求示例：</p>
<div class="cnblogs_code" onclick="cnblogs_code_show('df902497-b8e1-43b6-a780-389215812eff')"><img id="code_img_closed_df902497-b8e1-43b6-a780-389215812eff" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_df902497-b8e1-43b6-a780-389215812eff" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('df902497-b8e1-43b6-a780-389215812eff',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_df902497-b8e1-43b6-a780-389215812eff" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang=<span style="color: #800000;">"</span><span style="color: #800000;">en</span><span style="color: #800000;">"</span>>
<head>
<meta charset=<span style="color: #800000;">"</span><span style="color: #800000;">UTF-8</span><span style="color: #800000;">"</span>>
<title>Title</title>
<meta name=<span style="color: #800000;">"</span><span style="color: #800000;">viewport</span><span style="color: #800000;">"</span> content=<span style="color: #800000;">"</span><span style="color: #800000;">width=device-width, initial-scale=1</span><span style="color: #800000;">"</span>>
<style><span style="color: #000000;">
.hide {
display: none;
}
</span></style>
</head>
<body>
<p><input type=<span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span> <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">user</span><span style="color: #800000;">"</span>><span <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">hide</span><span style="color: #800000;">"</span> style=<span style="color: #800000;">"</span><span style="color: #800000;">color: red</span><span style="color: #800000;">"</span>>用户名已存在</span></p>
<script src=<span style="color: #800000;">"</span><span style="color: #800000;">/static/jquery-3.3.1.min.js</span><span style="color: #800000;">"</span>></script><span style="color: #000000;">
{#下面这一项是基于jQuery的基础上自动给我们的每一个ajax绑定一个请求头信息，类似于form表单提交post数据必须要有的csrf_token一样#}
{#否则我的Django中间件里面的校验csrf_token那一项会认为你这个请求不是合法的，阻止你的请求#}
</span><script src=<span style="color: #800000;">"</span><span style="color: #800000;">/static/setup_Ajax.js</span><span style="color: #800000;">"</span>></script>
<script>
<span style="color: #008000;">//</span><span style="color: #008000;">给input框绑定一个失去焦点的事件</span>
$(<span style="color: #800000;">'</span><span style="color: #800000;">.user</span><span style="color: #800000;">'</span><span style="color: #000000;">).blur(function () {
</span><span style="color: #008000;">//</span><span style="color: #008000;">$.ajax为固定用法，表示启用ajax</span>
<span style="color: #000000;"> $.ajax({
</span><span style="color: #008000;">//</span><span style="color: #008000;">url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交</span>
url:<span style="color: #800000;">''</span><span style="color: #000000;">,
</span><span style="color: #008000;">//</span><span style="color: #008000;">type为标定你这个ajax请求的方法</span>
type:<span style="color: #800000;">'</span><span style="color: #800000;">POST</span><span style="color: #800000;">'</span><span style="color: #000000;">,
</span><span style="color: #008000;">//</span><span style="color: #008000;">data后面跟的就是你提交给后端的数据</span>
data:{<span style="color: #800000;">'</span><span style="color: #800000;">username</span><span style="color: #800000;">'</span>:$(<span style="color: #0000ff;">this</span><span style="color: #000000;">).val()},
</span><span style="color: #008000;">//</span><span style="color: #008000;">success为回调函数，参数data即后端给你返回的数据</span>
<span style="color: #000000;"> success:function (data) {
ret</span>=<span style="color: #000000;">JSON.parse(data);
</span><span style="color: #0000ff;">if</span> (ret[<span style="color: #800000;">'</span><span style="color: #800000;">flag</span><span style="color: #800000;">'</span><span style="color: #000000;">]){
$(</span><span style="color: #800000;">'</span><span style="color: #800000;">p>span</span><span style="color: #800000;">'</span>).removeClass(<span style="color: #800000;">'</span><span style="color: #800000;">hide</span><span style="color: #800000;">'</span><span style="color: #000000;">);
}
}
})
});
</span></script>
</body>
</html></pre>
</div>
<span class="cnblogs_code_collapse">请一定点开看一看</span></div>
<h2>views.py：</h2>
<div class="cnblogs_code" onclick="cnblogs_code_show('e164cf7c-d5be-4f76-9d6a-b7dc2166a9ea')"><img id="code_img_closed_e164cf7c-d5be-4f76-9d6a-b7dc2166a9ea" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_e164cf7c-d5be-4f76-9d6a-b7dc2166a9ea" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('e164cf7c-d5be-4f76-9d6a-b7dc2166a9ea',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_e164cf7c-d5be-4f76-9d6a-b7dc2166a9ea" class="cnblogs_code_hide">
<pre><span style="color: #000000;">def index(request):
</span><span style="color: #0000ff;">if</span> request.method==<span style="color: #800000;">'</span><span style="color: #800000;">POST</span><span style="color: #800000;">'</span><span style="color: #000000;">:
ret</span>={<span style="color: #800000;">'</span><span style="color: #800000;">flag</span><span style="color: #800000;">'</span><span style="color: #000000;">:False}
username</span>=request.POST.<span style="color: #0000ff;">get</span>(<span style="color: #800000;">'</span><span style="color: #800000;">username</span><span style="color: #800000;">'</span><span style="color: #000000;">)
</span><span style="color: #0000ff;">if</span> username==<span style="color: #800000;">'</span><span style="color: #800000;">JBY</span><span style="color: #800000;">'</span><span style="color: #000000;">:
ret[</span><span style="color: #800000;">'</span><span style="color: #800000;">flag</span><span style="color: #800000;">'</span>]=<span style="color: #000000;">True
import json
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> HttpResponse(json.dumps(ret))
</span><span style="color: #0000ff;">return</span> render(request,<span style="color: #800000;">'</span><span style="color: #800000;">index.html</span><span style="color: #800000;">'</span>)</pre>
</div>
<span class="cnblogs_code_collapse">views.py</span></div>
<h2>$.ajax参数</h2>
<p><span style="color: #ff0000;">data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。</span></p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div>
<pre>$(<span style="color: #800000;">"</span><span style="color: #800000;">#b1</span><span style="color: #800000;">"</span>).on(<span style="color: #800000;">"</span><span style="color: #800000;">click</span><span style="color: #800000;">"</span><span style="color: #000000;">, function () {
$.ajax({
url:</span><span style="color: #800000;">"</span><span style="color: #800000;">/ajax_add/</span><span style="color: #800000;">"</span><span style="color: #000000;">,
type:</span><span style="color: #800000;">"</span><span style="color: #800000;">GET</span><span style="color: #800000;">"</span><span style="color: #000000;">,
data:{</span><span style="color: #800000;">"</span><span style="color: #800000;">i1</span><span style="color: #800000;">"</span>:$(<span style="color: #800000;">"</span><span style="color: #800000;">#i1</span><span style="color: #800000;">"</span>).val(),<span style="color: #800000;">"</span><span style="color: #800000;">i2</span><span style="color: #800000;">"</span>:$(<span style="color: #800000;">"</span><span style="color: #800000;">#i2</span><span style="color: #800000;">"</span>).val(),<span style="color: #800000;">"</span><span style="color: #800000;">hehe</span><span style="color: #800000;">"</span>: JSON.stringify([<span style="color: #800080;">1</span>, <span style="color: #800080;">2</span>, <span style="color: #800080;">3</span><span style="color: #000000;">])},
success:function (data) {
$(</span><span style="color: #800000;">"</span><span style="color: #800000;">#i3</span><span style="color: #800000;">"</span><span style="color: #000000;">).val(data);
}
})
})</span></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div></div>
<h1>JS实现AJAX(了解)</h1>
<div class="cnblogs_code" onclick="cnblogs_code_show('c756302d-eedb-4899-b12c-a832e60ce047')"><img id="code_img_closed_c756302d-eedb-4899-b12c-a832e60ce047" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_c756302d-eedb-4899-b12c-a832e60ce047" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('c756302d-eedb-4899-b12c-a832e60ce047',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_c756302d-eedb-4899-b12c-a832e60ce047" class="cnblogs_code_hide">
<pre><span style="color: #0000ff;">var</span> b2 = document.getElementById(<span style="color: #800000;">"</span><span style="color: #800000;">b2</span><span style="color: #800000;">"</span><span style="color: #000000;">);
b2.onclick </span>=<span style="color: #000000;"> function () {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> 原生JS</span>
<span style="color: #0000ff;">var</span> xmlHttp = <span style="color: #0000ff;">new</span><span style="color: #000000;"> XMLHttpRequest();
xmlHttp.open(</span><span style="color: #800000;">"</span><span style="color: #800000;">POST</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">/ajax_test/</span><span style="color: #800000;">"</span>, <span style="color: #0000ff;">true</span><span style="color: #000000;">);
xmlHttp.setRequestHeader(</span><span style="color: #800000;">"</span><span style="color: #800000;">Content-type</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">application/x-www-form-urlencoded</span><span style="color: #800000;">"</span><span style="color: #000000;">);
xmlHttp.send(</span><span style="color: #800000;">"</span><span style="color: #800000;">username=q1mi&password=123456</span><span style="color: #800000;">"</span><span style="color: #000000;">);
xmlHttp.onreadystatechange </span>=<span style="color: #000000;"> function () {
</span><span style="color: #0000ff;">if</span> (xmlHttp.readyState === <span style="color: #800080;">4</span> && xmlHttp.status === <span style="color: #800080;">200</span><span style="color: #000000;">) {
alert(xmlHttp.responseText);
}
};
};</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h1>AJAX请求如何设置csrf_token</h1>
<p>不论是ajax还是谁，只要是向我Django提交post请求的数据，都必须校验csrf_token来防伪跨站请求，那么如何在我的ajax中弄这个csrf_token呢，我又不像form表单那样可以在表单内部通过一句{% csrf_token %}就搞定了......</p>
<h3>方式1</h3>
<p>通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div>
<pre><span style="color: #000000;">$.ajax({
url: </span><span style="color: #800000;">"</span><span style="color: #800000;">/cookie_ajax/</span><span style="color: #800000;">"</span><span style="color: #000000;">,
type: </span><span style="color: #800000;">"</span><span style="color: #800000;">POST</span><span style="color: #800000;">"</span><span style="color: #000000;">,
data: {
</span><span style="color: #800000;">"</span><span style="color: #800000;">username</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">Tonny</span><span style="color: #800000;">"</span><span style="color: #000000;">,
</span><span style="color: #800000;">"</span><span style="color: #800000;">password</span><span style="color: #800000;">"</span>: <span style="color: #800080;">123456</span><span style="color: #000000;">,
</span><span style="color: #800000;">"</span><span style="color: #800000;">csrfmiddlewaretoken</span><span style="color: #800000;">"</span>: $(<span style="color: #800000;">"</span><span style="color: #800000;">[name = 'csrfmiddlewaretoken']</span><span style="color: #800000;">"</span>).val() <span style="color: #008000;">//</span><span style="color: #008000;"> 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中</span>
<span style="color: #000000;"> },
success: function (data) {
console.log(data);
}
})</span></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div></div>
<h3>方式2</h3>
<p>通过获取返回的cookie中的字符串 放置在请求头中发送。</p>
<p>注意：需要引入一个jquery.cookie.js插件。</p>
<div class="cnblogs_code" onclick="cnblogs_code_show('5e4ede92-7602-4aed-89fb-88eb7cb27420')"><img id="code_img_closed_5e4ede92-7602-4aed-89fb-88eb7cb27420" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_5e4ede92-7602-4aed-89fb-88eb7cb27420" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('5e4ede92-7602-4aed-89fb-88eb7cb27420',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_5e4ede92-7602-4aed-89fb-88eb7cb27420" class="cnblogs_code_hide">
<pre><span style="color: #000000;">$.ajax({
url: </span><span style="color: #800000;">"</span><span style="color: #800000;">/cookie_ajax/</span><span style="color: #800000;">"</span><span style="color: #000000;">,
type: </span><span style="color: #800000;">"</span><span style="color: #800000;">POST</span><span style="color: #800000;">"</span><span style="color: #000000;">,
headers: {</span><span style="color: #800000;">"</span><span style="color: #800000;">X-CSRFToken</span><span style="color: #800000;">"</span>: $.cookie(<span style="color: #800000;">'</span><span style="color: #800000;">csrftoken</span><span style="color: #800000;">'</span>)}, <span style="color: #008000;">//</span><span style="color: #008000;"> 从Cookie取csrf_token，并设置ajax请求头</span>
data: {<span style="color: #800000;">"</span><span style="color: #800000;">username</span><span style="color: #800000;">"</span>: <span style="color: #800000;">"</span><span style="color: #800000;">Q1mi</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">password</span><span style="color: #800000;">"</span>: <span style="color: #800080;">123456</span><span style="color: #000000;">},
success: function (data) {
console.log(data);
}
})</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h3>方式3</h3>
<p>或者用自己写一个getCookie方法：</p>
<div class="cnblogs_code" onclick="cnblogs_code_show('119ea771-ef7c-4635-b270-21dfe32045d8')"><img id="code_img_closed_119ea771-ef7c-4635-b270-21dfe32045d8" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_119ea771-ef7c-4635-b270-21dfe32045d8" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('119ea771-ef7c-4635-b270-21dfe32045d8',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_119ea771-ef7c-4635-b270-21dfe32045d8" class="cnblogs_code_hide">
<pre><span style="color: #000000;">function getCookie(name) {
</span><span style="color: #0000ff;">var</span> cookieValue = <span style="color: #0000ff;">null</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">if</span> (document.cookie && document.cookie !== <span style="color: #800000;">''</span><span style="color: #000000;">) {
</span><span style="color: #0000ff;">var</span> cookies = document.cookie.split(<span style="color: #800000;">'</span><span style="color: #800000;">;</span><span style="color: #800000;">'</span><span style="color: #000000;">);
</span><span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> i = <span style="color: #800080;">0</span>; i < cookies.length; i++<span style="color: #000000;">) {
</span><span style="color: #0000ff;">var</span> cookie =<span style="color: #000000;"> jQuery.trim(cookies[i]);
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Does this cookie string begin with the name we want?</span>
<span style="color: #0000ff;">if</span> (cookie.substring(<span style="color: #800080;">0</span>, name.length + <span style="color: #800080;">1</span>) === (name + <span style="color: #800000;">'</span><span style="color: #800000;">=</span><span style="color: #800000;">'</span><span style="color: #000000;">)) {
cookieValue </span>= decodeURIComponent(cookie.substring(name.length + <span style="color: #800080;">1</span><span style="color: #000000;">));
</span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
}
}
}
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> cookieValue;
}
</span><span style="color: #0000ff;">var</span> csrftoken = getCookie(<span style="color: #800000;">'</span><span style="color: #800000;">csrftoken</span><span style="color: #800000;">'</span>);</pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div>
<pre><span style="color: #000000;">function csrfSafeMethod(method) {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> these HTTP methods do not require CSRF protection</span>
<span style="color: #0000ff;">return</span> (/^(GET|HEAD|OPTIONS|TRACE)$/<span style="color: #000000;">.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
</span><span style="color: #0000ff;">if</span> (!csrfSafeMethod(settings.type) && !<span style="color: #0000ff;">this</span><span style="color: #000000;">.crossDomain) {
xhr.setRequestHeader(</span><span style="color: #800000;">"</span><span style="color: #800000;">X-CSRFToken</span><span style="color: #800000;">"</span><span style="color: #000000;">, csrftoken);
}
}
});</span></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div></div>
<p>将下面的文件配置到你的Django项目的静态文件中，在html页面上通过导入该文件即可自动帮我们解决ajax提交post数据时校验csrf_token的问题，(导入该配置文件之前，需要先导入jQuery，因为这个配置文件内的内容是基于jQuery来实现的)</p>
<p>更多细节详见：<a href="https://docs.djangoproject.com/en/1.11/ref/csrf/" target="_blank">Djagno官方文档中关于CSRF的内容</a></p>
<h2 class="p1">练习（用户名是否已被注册）</h2>
<h3 class="p2"><span class="s3">功能介绍</span></h3>
<p><span class="s3">在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回<span class="s4"><span class="s2"><span class="s4"><span class="s2"><span class="s4"><span class="s2">这个用户名是否已经被注册过。</span></span></span></span></span></span></span></p>
<p> </p>
<h3 class="p2"><span class="s3">案例分析</span></h3>
<ul>
<li class="li5"><span class="s5">页面中给出注册表单；</span></li>
<li class="li5"><span class="s5"><span class="s6">在<span class="s2">username input标签<span class="s6">中绑定<span class="s2">onblur<span class="s6">事件处理函数。</span></span></span></span></span></span></li>
<li class="li6"><span class="s5"><span class="s4"><span class="s2"><span class="s4">当input标签失去焦点后获取 username<span class="s2">表单字段的值，向服务端发送AJAX请求<span class="s4"><span class="s2">；</span></span></span></span></span></span></span></li>
<li class="li5"><span class="s5"><span class="s2">django的视图函数中处理该请求，<span class="s6">获取<span class="s2">username值<span class="s6">，判断该用户在数据库中是否被注册<span class="s2"><span class="s6">，如果被注册了就返回“该用户已被注册”，<span class="s2"><span class="s6">否则响应“该用户名可以注册”。</span></span></span></span></span></span></span></span></span></li>
</ul>
<p>答案就在前面的示例中，看你能不能找到了......</p>
<h1 class="entry-title">序列化</h1>
<h2>Django内置的serializers</h2>
<p>什么意思呢？就是我的前段想拿到由ORM得到的数据库里面的一个个用户对象，我的后端想直接将实例化出来的数据对象直接发送给客户端，那么这个时候，就可以用Django给我们提供的序列化方式</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div>
<pre><span style="color: #000000;">def ser(request):
#拿到用户表里面的所有的用户对象
user_list</span>=<span style="color: #000000;">models.User.objects.all()
#导入内置序列化模块
</span><span style="color: #0000ff;">from</span><span style="color: #000000;"> django.core import serializers
#调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
ret</span>=serializers.serialize(<span style="color: #800000;">'</span><span style="color: #800000;">json</span><span style="color: #800000;">'</span><span style="color: #000000;">,user_list)
</span><span style="color: #0000ff;">return</span> HttpResponse(ret)</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div></div>
<p><img src="https://images2018.cnblogs.com/blog/1342004/201806/1342004-20180627150408496-1084312558.png" alt=""></p>
<h1>补充一个SweetAlert插件示例</h1>
<p><img src="https://images2018.cnblogs.com/blog/867021/201804/867021-20180407235320541-386911677.gif" alt=""></p>
<p>点击下载<a href="https://github.com/lipis/bootstrap-sweetalert" target="_blank">Bootstrap-sweetalert项目</a>。</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div>
<pre> $(<span style="color: #800000;">"</span><span style="color: #800000;">#b55</span><span style="color: #800000;">"</span><span style="color: #000000;">).click(function () {
swal({
title: </span><span style="color: #800000;">"</span><span style="color: #800000;">你确定要删除吗？</span><span style="color: #800000;">"</span><span style="color: #000000;">,
text: </span><span style="color: #800000;">"</span><span style="color: #800000;">删除可就找不回来了哦！</span><span style="color: #800000;">"</span><span style="color: #000000;">,
type: </span><span style="color: #800000;">"</span><span style="color: #800000;">warning</span><span style="color: #800000;">"</span><span style="color: #000000;">,
showCancelButton: </span><span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;"> 是否显示取消按钮</span>
confirmButtonClass: <span style="color: #800000;">"</span><span style="color: #800000;">btn-danger</span><span style="color: #800000;">"</span>, <span style="color: #008000;">//</span><span style="color: #008000;"> 确认按钮的样式类</span>
confirmButtonText: <span style="color: #800000;">"</span><span style="color: #800000;">删除</span><span style="color: #800000;">"</span>, <span style="color: #008000;">//</span><span style="color: #008000;"> 确认按钮文本</span>
cancelButtonText: <span style="color: #800000;">"</span><span style="color: #800000;">取消</span><span style="color: #800000;">"</span>, <span style="color: #008000;">//</span><span style="color: #008000;"> 取消按钮文本</span>
closeOnConfirm: <span style="color: #0000ff;">false</span>, <span style="color: #008000;">//</span><span style="color: #008000;"> 点击确认按钮不关闭弹框</span>
showLoaderOnConfirm: <span style="color: #0000ff;">true</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 显示正在删除的动画效果</span>
<span style="color: #000000;"> },
function () {
</span><span style="color: #0000ff;">var</span> deleteId = <span style="color: #800080;">2</span><span style="color: #000000;">;
$.ajax({
url: </span><span style="color: #800000;">"</span><span style="color: #800000;">/delete_book/</span><span style="color: #800000;">"</span><span style="color: #000000;">,
type: </span><span style="color: #800000;">"</span><span style="color: #800000;">post</span><span style="color: #800000;">"</span><span style="color: #000000;">,
data: {</span><span style="color: #800000;">"</span><span style="color: #800000;">id</span><span style="color: #800000;">"</span><span style="color: #000000;">: deleteId},
success: function (data) {
</span><span style="color: #0000ff;">if</span> (data.code === <span style="color: #800080;">0</span><span style="color: #000000;">) {
swal(</span><span style="color: #800000;">"</span><span style="color: #800000;">删除成功!</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">你可以准备跑路了！</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">success</span><span style="color: #800000;">"</span><span style="color: #000000;">);
} </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
swal(</span><span style="color: #800000;">"</span><span style="color: #800000;">删除失败</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">你可以再尝试一下！</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">error</span><span style="color: #800000;">"</span><span style="color: #000000;">)
}
}
})
});
})</span></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></span></div></div>
<p>上面这个二次确认的动态框样式，你也可以直接应用到你的项目中</p>
<p>提醒事项：</p>
<p>1.上述的样式类部分渲染的样式来自于bootstrap中，所有建议在使用上述样式时，将bootstrap的js和css也导入了，这样的情况下，页面效果就不会有任何问题</p>
<p>2.弹出的上述模态框中，可能字体会被图标掩盖一部分，可通过调整字体的上外边距来解决</p>
<p><img src="https://img2018.cnblogs.com/blog/1342004/201909/1342004-20190920173613581-766918043.png" alt=""></p>
<p> </p>
</div>
<div id="MySignature"></div>
<div class="clear"></div>
<div id="blog_post_info_block"><div id="BlogPostCategory">
分类:
<a href="https://www.cnblogs.com/Dominic-Ji/category/1234201.html" target="_blank">Django框架</a></div>
<div id="blog_post_info">
<div id="green_channel">
<a href="javascript:void(0);" id="green_channel_digg" onclick="DiggIt(9234099,cb_blogId,1);green_channel_success(this,'谢谢推荐！');">好文要顶</a>
<a id="green_channel_follow" href="javascript:void(0);">已关注</a>
<a id="green_channel_favorite" onclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏该文</a>
<a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" onclick="ShareToTsina()"><img src="https://common.cnblogs.com/images/icon_weibo_24.png" alt=""></a>
<a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" onclick="shareOnWechat()"><img src="https://common.cnblogs.com/images/wechat.png" alt=""></a>
</div>
<div id="author_profile">
<div id="author_profile_info" class="author_profile_info">
<a href="https://home.cnblogs.com/u/Dominic-Ji/" target="_blank"><img src="https://pic.cnblogs.com/face/1342004/20180304191536.png" class="author_avatar" alt=""></a>
<div id="author_profile_detail" class="author_profile_info">
<a href="https://home.cnblogs.com/u/Dominic-Ji/">JasonJi</a><br>
<a href="https://home.cnblogs.com/u/Dominic-Ji/followees/">关注 - 4</a><br>
<a href="https://home.cnblogs.com/u/Dominic-Ji/followers/">粉丝 - 200</a>
</div>
</div>
<div class="clear"></div>
<div id="author_profile_honor"></div>
<div id="author_profile_follow">
我在关注他 <a href="javascript:void(0);" onclick="unfollow('f76404ce-3d14-4c88-9e28-08d5782f1af4');return false;">取消关注</a>
</div>
</div>
<div id="div_digg">
<div class="diggit" onclick="votePost(9234099,'Digg')">
<span class="diggnum" id="digg_count">1</span>
</div>
<div class="buryit" onclick="votePost(9234099,'Bury')">
<span class="burynum" id="bury_count">0</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips">
</div>
</div>
<script type="text/javascript">
currentDiggType = 0;
</script></div>
<div class="clear"></div>
<div id="post_next_prev">
<br>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10864457.html" class="p_n_p_prefix">» </a> 下一篇： <a href="https://www.cnblogs.com/Dominic-Ji/p/10864457.html" title="发布于 2019-05-14 20:39">前端内容</a>
</div>
</div>
</div>
<div class="postDesc">posted @
<span id="post-date">2018-06-27 15:12</span> <a href="https://www.cnblogs.com/Dominic-Ji/">JasonJi</a> 阅读(<span id="post_view_count">542</span>) 评论(<span id="post_comment_count">0</span>) <a href="https://i.cnblogs.com/EditPosts.aspx?postid=9234099" rel="nofollow"> 编辑</a> <a href="javascript:void(0)" onclick="AddToWz(9234099); return false;">收藏</a>
</div>
</div>
</div><!--end: topics 文章、评论容器-->
</div>
<script src="https://common.cnblogs.com/highlight/9.12.0/highlight.min.js"></script>
<script>markdown_highlight();</script>
<script>
var allowComments = true, cb_blogId = 419604, cb_blogApp = 'Dominic-Ji', cb_blogUserGuid = 'f76404ce-3d14-4c88-9e28-08d5782f1af4';
var cb_entryId = 9234099, cb_entryCreatedDate = '2018-06-27 15:12', cb_postType = 1;
loadViewCount(cb_entryId);
</script><a name="!comments"></a>
<div id="blog-comments-placeholder"></div>
<script>
var commentManager = new blogCommentManager();
commentManager.renderComments(0);
</script>
<div id="comment_form" class="commentform">
<a name="commentform"></a>
<div id="divCommentShow"></div>
<div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div>
<div id="comment_form_container">
<script type="text/javascript" src="https://mention.cnblogs.com//bundles/mention.js?id=20160615"></script>
<div id="commentform_title">发表评论</div>
<span id="tip_comment" style="color:Red"></span>
<p>
昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="西安-杨鑫">
</p>
<div class="commentbox_main">
<div class="commentbox_title">
<div class="commentbox_title_left">评论内容：</div>
<div class="commentbox_title_right">
<img id="ubb_quote" class="comment_icon" src="https://static.cnblogs.com/images/ubb/quote.gif" alt="引用" title="添加引用" onclick="insertUBB('tbCommentBody','quote')">
<img id="ubb_bold" class="comment_icon" src="https://static.cnblogs.com/images/ubb/b.png" alt="粗体" title="添加粗体" onclick="insertUBB('tbCommentBody','b')">
<img id="ubb_url" class="comment_icon" src="https://static.cnblogs.com/images/ubb/lk.png" alt="链接" title="添加链接" onclick="insertUbbUrl('tbCommentBody')">
<img id="ubb_indent" class="comment_icon" src="https://static.cnblogs.com/images/ubb/indent.png" alt="缩进" title="添加首行缩进" onclick="insertIndent('tbCommentBody')">
<img id="ubb_code" class="comment_icon" src="https://static.cnblogs.com/images/ubb/InsertCode.gif" alt="代码" title="添加代码" onclick="insertUbbCode()">
<img id="ubb_img" class="comment_icon" src="https://static.cnblogs.com/images/ubb/img.gif" alt="图片" title="上传图片" onclick="OpenImageUploadWindow();">
</div>
</div>
<textarea id="tbCommentBody" class="comment_textarea"></textarea>
</div>
<p id="commentbox_opt">
<input id="btn_comment_submit" type="button" class="comment_btn" value="提交评论">
<span id="span_comment_canceledit" style="display:none"><a href="javascript:void(0);" onclick="return CancelCommentEdit()">不改了</a></span>
<a href="javascript:void(0);" onclick="return logout();">退出</a>
<a id="commentbox_opt_sub" href="javascript:void(0);" title="订阅后有新评论时会邮件通知您" onclick="commentManager.Subscribe()">订阅评论</a>
</p>
<div id="tip_comment2" style="color:Red"></div>
<p>
[Ctrl+Enter快捷键提交]
</p>
<div style="display:none">
<span id="comment_edit_id"></span><span id="span_parentcomment_id"></span>
<span id="span_parent_id"></span>
<span id="span_comment_replyto"></span>
<span id="span_comment_posted"></span>
</div>
</div>
<div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
<div id="ad_t2"><a href="http://www.ucancode.com/index.htm" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-工控')">【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库</a><br><a href="https://www.jdcloud.com/cn/activity/newUser?utm_source=DMT_cnblogs&utm_medium=CH&utm_campaign=09vm&utm_term=Virtual-Machines" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-京东云')">【活动】京东云限时优惠1.5折购云主机，最高返价值1000元礼品！</a><br><a href="http://clickc.admaster.com.cn/c/a131574,b3595115,c1705,i0,m101,8a1,8b3,h" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-华为云微认证')">【推荐】零基础轻松玩转华为云产品，获壕礼加返百元大礼</a><br><a href="https://www.ctyun.cn/activity/#/20190919?hmsr=%E5%8D%9A%E5%AE%A2%E5%9B%AD-0916-919%E6%B4%BB%E5%8A%A8&hmpl=&hmcu=&hmkw=&hmci=" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-天翼云')">【推荐】919 天翼云钜惠，全网低价，云主机9元轻松购</a><br><a href="http://clickc.admaster.com.cn/c/a131575,b3595121,c1705,i0,m101,8a1,8b3,h" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-华为文字')">【推荐】华为云文字识别资源包重磅上市，1元万次限时抢购</a><br><a href="https://cloud.tencent.com/act/pro/overseas?fromSource=gwzcw.2802159.2802159.2802159&utm_medium=cpc&utm_id=gwzcw.2802159.2802159.2802159" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-腾讯云')">【推荐】腾讯云海外云服务器1核2G19.8元/月</a><br><a href="https://www.cnblogs.com/cmt/p/11505603.html" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-华为云代金券')">【福利】git pull && cherry-pick 博客园&华为云百万代金券</a><br></div>
<div id="opt_under_post"></div>
<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(function () {
googletag.defineSlot("/1090369/C1", [300, 250], "div-gpt-ad-1546353474406-0").addService(googletag.pubads());
googletag.defineSlot("/1090369/C2", [468, 60], "div-gpt-ad-1539008685004-0").addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<div id="cnblogs_c1" class="c_ad_block">
<div id="div-gpt-ad-1546353474406-0" style="height:250px; width:300px;" data-google-query-id="CLLZqqCw6eQCFYGelgodHsQK5Q"><div id="google_ads_iframe_/1090369/C1_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/1090369/C1_0" title="3rd party ad content" name="google_ads_iframe_/1090369/C1_0" width="300" height="250" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="1" data-load-complete="true"></iframe></div></div>
</div>
<div id="under_post_news"><div class="recomm-block"><b>相关博文：</b><br>· <a title="AJAX请求提交数据" href="https://www.cnblogs.com/ljc-0923/p/9806224.html" target="_blank" onclick="clickRecomItmem(9806224)">AJAX请求提交数据</a><br>· <a title="ajax使用" href="https://www.cnblogs.com/zlpbk/p/9508538.html" target="_blank" onclick="clickRecomItmem(9508538)">ajax使用</a><br>· <a title="Django 【第十六篇】Ajax基础" href="https://www.cnblogs.com/xiaohema/p/8456395.html" target="_blank" onclick="clickRecomItmem(8456395)">Django 【第十六篇】Ajax基础</a><br>· <a title="Django之ajax" href="https://www.cnblogs.com/wjs521/p/9798632.html" target="_blank" onclick="clickRecomItmem(9798632)">Django之ajax</a><br>· <a title="JS之AJAX" href="https://www.cnblogs.com/panda-pandeyong/p/9798983.html" target="_blank" onclick="clickRecomItmem(9798983)">JS之AJAX</a><br></div></div>
<div id="cnblogs_c2" class="c_ad_block">
<div id="div-gpt-ad-1539008685004-0" style="height:60px; width:468px;" data-google-query-id="CLPZqqCw6eQCFYGelgodHsQK5Q">
<div id="google_ads_iframe_/1090369/C2_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/1090369/C2_0" title="3rd party ad content" name="google_ads_iframe_/1090369/C2_0" width="468" height="60" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="2" data-load-complete="true"></iframe></div></div>
</div>
<div id="under_post_kb">
<div class="itnews c_ad_block">
<b>最新 IT 新闻</b>:
<br>
· <a href="//news.cnblogs.com/n/640408/" target="_blank">欧洲发现“消失的大陆” 距今2.4亿年</a>
<br>
· <a href="//news.cnblogs.com/n/640407/" target="_blank">小米MIX Alpha发布引老外热议：工业设计足以让苹果赧颜</a>
<br>
· <a href="//news.cnblogs.com/n/640406/" target="_blank">华为云的另一项秘密武器：AI开发平台ModelArts2.0重磅升级</a>
<br>
· <a href="//news.cnblogs.com/n/640405/" target="_blank">阿里董事局主席张勇：阿里数字经济体中国年度用户9.6亿</a>
<br>
· <a href="//news.cnblogs.com/n/640404/" target="_blank">小米MIX Alpha 5G：180.6%屏占比环绕屏，1亿像素三摄，售价19999</a>
<br>
» <a href="https://news.cnblogs.com/" title="IT 新闻" target="_blank">更多新闻...</a>
</div></div>
<div id="HistoryToday" class="c_ad_block"></div>
<script type="text/javascript">
fixPostBody();
setTimeout(function () { incrementViewCount(cb_entryId); }, 50);
deliverAdT2();
deliverAdC1();
deliverAdC2();
loadNewsAndKb();
loadBlogSignature();
LoadPostCategoriesTags(cb_blogId, cb_entryId); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);
loadOptUnderPost();
GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);
</script>
</div>
</div><!--end: forFlow -->
</div><!--end: mainContent 主体内容容器-->
<div id="sideBar">
<div id="sideBarMain">
<div id="sidebar_news" class="newsItem"><!--done-->
<h3 class="catListTitle">公告</h3>
<div id="blog-news">
<div id="profile_block">
昵称：
<a href="https://home.cnblogs.com/u/Dominic-Ji/">
JasonJi
</a>
<br>
园龄：
<a href="https://home.cnblogs.com/u/Dominic-Ji/" title="入园时间：2018-03-04">
1年6个月
</a>
<br>
粉丝：
<a href="https://home.cnblogs.com/u/Dominic-Ji/followers/">
200
</a>
<br>
关注：
<a href="https://home.cnblogs.com/u/Dominic-Ji/followees/">
4
</a>
<div id="p_b_follow">
<a href="javascript:void(0);" onclick="unfollow('f76404ce-3d14-4c88-9e28-08d5782f1af4');">-取消关注</a></div>
<script>getFollowStatus('f76404ce-3d14-4c88-9e28-08d5782f1af4');</script>
</div>
</div>
</div>
<div id="blog-calendar" style="">
<table id="blogCalendar" class="Cal" cellspacing="0" cellpadding="0" title="Calendar" border="0">
<tbody>
<tr>
<td colspan="7">
<table class="CalTitle" cellspacing="0" border="0">
<tbody>
<tr>
<td class="CalNextPrev">
<a href="javascript:void(0);" onclick="loadBlogCalendar('2019/08/24'); return false;"><</a>
</td>
<td align="center">2019年9月</td>
<td align="right" class="CalNextPrev">
<a href="javascript:void(0);" onclick="loadBlogCalendar('2019/10/24'); return false;">></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th class="CalDayHeader" align="center" abbr="日" scope="col">日</th>
<th class="CalDayHeader" align="center" abbr="一" scope="col">一</th>
<th class="CalDayHeader" align="center" abbr="二" scope="col">二</th>
<th class="CalDayHeader" align="center" abbr="三" scope="col">三</th>
<th class="CalDayHeader" align="center" abbr="四" scope="col">四</th>
<th class="CalDayHeader" align="center" abbr="五" scope="col">五</th>
<th class="CalDayHeader" align="center" abbr="六" scope="col">六</th>
</tr>
<tr>
<td class="CalWeekendDay" align="center">
1
</td>
<td class="" align="center">
2
</td>
<td class="" align="center">
3
</td>
<td class="" align="center">
4
</td>
<td class="" align="center">
5
</td>
<td class="" align="center">
6
</td>
<td class="CalWeekendDay" align="center">
7
</td>
</tr>
<tr>
<td class="CalWeekendDay" align="center">
8
</td>
<td class="" align="center">
9
</td>
<td class="" align="center">
10
</td>
<td class="" align="center">
11
</td>
<td class="" align="center">
12
</td>
<td class="" align="center">
13
</td>
<td class="CalWeekendDay" align="center">
14
</td>
</tr>
<tr>
<td class="CalWeekendDay" align="center">
15
</td>
<td class="" align="center">
16
</td>
<td class="" align="center">
17
</td>
<td class="" align="center">
18
</td>
<td class="" align="center">
19
</td>
<td class="" align="center">
20
</td>
<td class="CalWeekendDay" align="center">
21
</td>
</tr>
<tr>
<td class="CalWeekendDay" align="center">
22
</td>
<td class="" align="center">
23
</td>
<td class="CalTodayDay" align="center">
24
</td>
<td class="" align="center">
25
</td>
<td class="" align="center">
26
</td>
<td class="" align="center">
27
</td>
<td class="CalWeekendDay" align="center">
28
</td>
</tr>
<tr>
<td class="CalWeekendDay" align="center">
29
</td>
<td class="" align="center">
30
</td>
<td class="CalOtherMonthDay" align="center">
1
</td>
<td class="CalOtherMonthDay" align="center">
2
</td>
<td class="CalOtherMonthDay" align="center">
3
</td>
<td class="CalOtherMonthDay" align="center">
4
</td>
<td class="CalOtherMonthDay" align="center">
5
</td>
</tr>
<tr>
<td class="CalOtherMonthDay" align="center">
6
</td>
<td class="CalOtherMonthDay" align="center">
7
</td>
<td class="CalOtherMonthDay" align="center">
8
</td>
<td class="CalOtherMonthDay" align="center">
9
</td>
<td class="CalOtherMonthDay" align="center">
10
</td>
<td class="CalOtherMonthDay" align="center">
11
</td>
<td class="CalOtherMonthDay" align="center">
12
</td>
</tr>
</tbody>
</table></div><script>loadBlogDefaultCalendar();</script>
<div id="leftcontentcontainer">
<div id="blog-sidecolumn">
<!-- 搜索 -->
<div id="sidebar_search" class="sidebar-block">
<div id="sidebar_search" class="mySearch">
<h3 class="catListTitle">搜索</h3>
<div id="sidebar_search_box">
<div id="widget_my_zzk" class="div_my_zzk">
<input type="text" id="q" onkeydown="return zzk_go_enter(event);" class="input_my_zzk"> <input onclick="zzk_go()" type="button" value="找找看" id="btnZzk" class="btn_my_zzk">
</div>
<div id="widget_my_google" class="div_my_zzk">
<input type="text" name="google_q" id="google_q" onkeydown="return google_go_enter(event);" class="input_my_zzk"> <input onclick="google_go()" type="button" value="谷歌搜索" class="btn_my_zzk">
</div>
</div>
</div>
</div>
<!-- 常用链接 -->
<div id="sidebar_shortcut" class="sidebar-block">
<div class="catListLink">
<h3 class="catListTitle">
常用链接
</h3>
<ul>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/" title="我的博客的随笔列表">我的随笔</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/MyComments.html" title="我的发表过的评论列表">我的评论</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/OtherPosts.html" title="我评论过的随笔列表">我的参与</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/RecentComments.html" title="我的博客的评论列表">最新评论</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/tag/" title="我的博客的标签列表">我的标签</a>
</li>
</ul>
<div id="itemListLin_con" style="display:none;">
<ul>
</ul>
</div>
</div>
</div>
<!-- 最新随笔 -->
<div id="sidebar_recentposts" class="sidebar-block">
<div class="catListEssay">
<h3 class="catListTitle">最新随笔</h3>
<ul>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/11115887.html">1.python爬虫之Scrapy框架</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/11093137.html">2.python基础</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10897142.html">3.优酷项目</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10881214.html">4.Django框架</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10864457.html">5.前端内容</a>
</li>
</ul>
</div>
</div>
<!-- 我的标签 -->
<div id="sidebar_toptags" class="sidebar-block">
</div>
<!-- 积分与排名 -->
<!-- 随笔分类、随笔档案、文章分类、新闻分类、相册、链接 -->
<div id="sidebar_categories">
<div id="sidebar_postcategory" class="catListPostCategory sidebar-block">
<h3 class="catListTitle">
随笔分类
</h3>
<ul>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1426259.html" rel="" target="">
CRM(1)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1234201.html" rel="" target="">
Django框架(16)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1282213.html" rel="" target="">
Flask(1)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1250079.html" rel="" target="">
Git
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1271163.html" rel="" target="">
Linux
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1256845.html" rel="" target="">
mongoDB(3)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1254214.html" rel="" target="">
MySQL(2)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1183269.html" rel="" target="">
Python(2)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1238356.html" rel="" target="">
redis(3)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1252121.html" rel="" target="">
Vue
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1281287.html" rel="" target="">
量化投资于Python(2)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1221786.html" rel="" target="">
前端web(5)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1284260.html" rel="" target="">
人工智能相关
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/category/1249452.html" rel="" target="">
随记(1)
</a>
</li>
</ul>
</div>
<div id="sidebar_postarchive" class="catListPostArchive sidebar-block">
<h3 class="catListTitle">
随笔档案
</h3>
<ul>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2019/07.html" rel="" target="">
2019年7月(1)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2019/06.html" rel="" target="">
2019年6月(1)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2019/05.html" rel="" target="">
2019年5月(21)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2019/04.html" rel="" target="">
2019年4月(2)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2019/03.html" rel="" target="">
2019年3月(6)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2019/02.html" rel="" target="">
2019年2月(2)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2018/12.html" rel="" target="">
2018年12月(1)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2018/11.html" rel="" target="">
2018年11月(1)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2018/09.html" rel="" target="">
2018年9月(4)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2018/08.html" rel="" target="">
2018年8月(9)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2018/07.html" rel="" target="">
2018年7月(4)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2018/06.html" rel="" target="">
2018年6月(14)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/archive/2018/05.html" rel="" target="">
2018年5月(1)
</a>
</li>
</ul>
</div>
</div>
<!-- 最新评论 -->
<div id="sidebar_recentcomments" class="sidebar-block">
<div class="catListComment">
<h3 class="catListTitle">最新评论</h3>
<div class="RecentCommentBlock">
<ul>
<li class="recent_comment_title"><a href="https://www.cnblogs.com/Dominic-Ji/articles/10982293.html#4358781">1. Re:路由系统</a></li>
<li class="recent_comment_body">@ Nmdlao原来那天，在我面前亮牌子的是你...</li>
<li class="recent_comment_author">--Bitten</li>
<li class="recent_comment_title"><a href="https://www.cnblogs.com/Dominic-Ji/articles/10982293.html#4358772">2. Re:路由系统</a></li>
<li class="recent_comment_body">我的亚索很强,什么时候来一把</li>
<li class="recent_comment_author">--Nmdlao</li>
<li class="recent_comment_title"><a href="https://www.cnblogs.com/Dominic-Ji/articles/10982293.html#4358767">3. Re:路由系统</a></li>
<li class="recent_comment_body">你盲僧r闪6吗?</li>
<li class="recent_comment_author">--Nmdlao</li>
<li class="recent_comment_title"><a href="https://www.cnblogs.com/Dominic-Ji/p/11093137.html#4310301">4. Re:python基础</a></li>
<li class="recent_comment_body">内容很丰富!很全!</li>
<li class="recent_comment_author">--jueyuanfengsheng</li>
<li class="recent_comment_title"><a href="https://www.cnblogs.com/Dominic-Ji/p/9240365.html#4307369">5. Re:Django Form表单组件</a></li>
<li class="recent_comment_body"><script>alert('123')</script></li>
<li class="recent_comment_author">--椛詻無聲</li>
</ul>
</div>
</div>
</div>
<!-- 阅读排行榜 -->
<div id="sidebar_topviewedposts" class="sidebar-block">
<div class="catListView">
<h3 class="catListTitle">阅读排行榜</h3>
<div id="TopViewPostsBlock">
<ul style="word-break:break-all">
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/11093137.html">
1. python基础(4737)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10881214.html">
2. Django框架(3627)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10864457.html">
3. 前端内容(3016)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/9203990.html">
4. Django ORM中常用字段和参数(1353)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10136928.html">
5. 前端知识之HTML内容(1321)
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 评论排行榜 -->
<div id="sidebar_topcommentedposts" class="sidebar-block">
<div class="catListFeedback">
<h3 class="catListTitle">评论排行榜</h3>
<div id="TopFeedbackPostsBlock">
<ul style="word-break:break-all">
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/9167438.html">
1. Django简介(3)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/9240365.html">
2. Django Form表单组件(1)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10520256.html">
3. 元少带你看元类(1)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10136928.html">
4. 前端知识之HTML内容(1)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/9550525.html">
5. 爬虫之Scrapy框架(1)
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 推荐排行榜 -->
<div id="sidebar_topdiggedposts" class="sidebar-block">
<div id="topdigg_posts_wrap">
<div class="catListView">
<h3 class="catListTitle">推荐排行榜</h3>
<div id="TopDiggPostsBlock">
<ul style="word-break: break-all">
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10474769.html">
1. 前端CSS(9)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10490669.html">
2. jQuery快速入门(9)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10136928.html">
3. 前端知识之HTML内容(7)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10881214.html">
4. Django框架(7)
</a>
</li>
<li>
<a href="https://www.cnblogs.com/Dominic-Ji/p/11093137.html">
5. python基础(6)
</a>
</li>
</ul>
</div>
</div>
</div>
</div></div>
<script>loadBlogSideColumn();</script>
</div>
</div><!--end: sideBarMain -->
</div><!--end: sideBar 侧边栏容器 -->
<div class="clear"></div>
</div>
