分页器组件
<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>