虎课网为您提供字体设计版块下的AJAX请求实例-Python博客系统实战图文教程，本篇教程使用软件为Python（3）、Django（3.2.6）、Mysql（5.7）、BootStrap（3.4.1）、 jQuery（2.1.3），难度等级为中级拔高，下面开始学习这节课的内容吧！

那就开始今天的教程吧

1.本节课介绍在Web应用开发中另外一个比较核心的技术【AJAX请求】，用这个方式在博客网站的功能基础上改造一下登录页面，同时增加对博客文章点赞的功能，给大家介绍基于Django的这个框架如何来开发AJAX请求，

 AJAX叫异步的JavaScript和XML，之前开发的博客网站所有的功能都是基于页面跳转的，要么基于地址栏的这种get请求，要么是基于form表单的一种post提交，这些方式严格意义上来说是同步的请求，就是网页会在等待后台的请求返回，

 然后再重新展示返回的页面，这个过程中如果后台请求比较慢，或者我的网页上有多个请求，同时执行的时候就会产生问题，所以现在这个AJAX请求的开发方式也会越来越多。

 这一讲核心的两个知识点，第一个就是改造登录页面，让登录请求变成AJAX调用方式，这个过程中学习AJAX请求的作业基础的一些开发方法，再来一个真正的实例。

2.来到Pycharm上，先来改造登录页面，首先定义新的【view】，login的登录方法在blog应用下的views里边，复制一下它，这回让网页不进行跳转，以AJAX请求的方式来开发这个页面，改个名字加后缀 ajax，通过POST请求来提交，

 得到用户名和密码，然后验证身份，如果验证成功完成登录，那么AJAX请求和普通get和post请求的差别就在return的语句上，用户的权限检查成功之后调用了login方法，在session中增加了用户信息，

 相当于用户联动的完成了登录，这里它跳转到首页了，可是在AJAX请求的时候就不能用redirect的方法来返回一个首页的链接。

3.如果登录校验不成功重新返回到login模板，现在return先去掉，else这句话也去掉，AJAX请求都是伴随着Json数据的，要返回给前端一个Json数据，这样是AJAX请求最常用的调用方式，但是这并不是全部，可以返回图片或者是文本，

 以Json请求来举例，AJAX请求中要定义一个返回的结果，那么Json数据和Python里边的字典对应，定义一个返回的字典，这个字典中要有两个字段，第一个叫【code】，默认是个0表示登录成功，还有一个是【message】，

 就是成功失败的提示信息，相当于响应码和响应信息，如果用户检查失败，ret的code要给它换一个值，就不是0，先用-1表示它是登录失败，同样对应的message给出一个比较明确的提示。

4.AJAX请求不能以网页跳转的方式，什么重定向都没有用，所以直接返回一个Json数据，这个else如果不是post请求提交的，希望是一个非法请求，比方说这里定义一个-1表示请求非法，在AJAX这个视图中是不需要跳转到首页的，

 跳转首页依然用上面的请求方式，现在要返回前端的数据，直接return ret，这个ret需要创建一个新的返回结果的类型，比方这里用【JsonResponse】，大家记住这个类，然后带着ret这个参数，把它引入进来，

 其实AJAX请求就是用JsonResponse来返回json数据，如果你返回普通的数据，用普通的HttpResponse就可以了，这个例子里边以json数据的格式为例，那么字典的类型的数据可以直接转换成json格式的字符串，然后以json报文的这种方式。

5.要为这个方法配置一个新的路由，找到urls，login改成【login_ajax】，这个name已经没有什么用了，就加一个新的路由，下一步最主要改前端的页面，AJAX一定是通过JS调起的，前端用了Jquery这个框架，就去改前端的代码就可以了，

 找到【login】的页面，按钮现在类型叫submit，它是form表单的提交的按键，也就是说它的本质是提交，它不是一个普通的按钮，如果想用AJAX请求来提交后台，这个地方要改成button，让它变成一个普通的按钮，id等于loginbutton。

6.在这个基础上加一段【script】的代码，loginbutton绑定它的click方法，方法是个函数function，然后要构造请求参数，比方说formdata，直接写AJAX方法，ajax来调用后台的请求，中间带着参数的，第一个参数就是url，

 向哪里发送链接，现在这个url叫login_ajax，type依然要求它是post请求，下一个data，传送的post请求的数据是一个字典，success就是执行成功之后回调的一个函数，带一个反馈数据叫data，先在console.log打印data，

 看后台返回的内容是什么，调试完了我们再做一些其他的连接的动作。

7.要强调说明上送的数据，第一个数据是用户名【username】，第二个数据是【password】，再回到login页面，username是表单中输入进来的，用户名的这个录入框有id，密码上也有id，就拿id进行取值就可以了，那么username .val，

 下一个叫password，也就是它的值是password .val，然后向后台发送请求，现在这个按钮已经不能以form表单的方式提交了，回到表单中，所有的Django的form是必须要有的，它这个参数名字叫csrfmiddlewaretoken，用这个名字定义token，

 叫csrfmiddleware 中间件 token，这个token的值csrf_token，这就是一个变量的填充。

8.后台的data就是view返回的字典，前台已经拿到了后台的响应，所以大家千万不要忘了把这个【token】加上，如果data.code等于0，说明这个登录是成功的，else 是失败的，成功的时候希望网页进行跳转，window.location.href

 等于要跳转到网站的首页上，这是之前的业务逻辑，如果登录没有成功要提示错误信息，里边就给它加个id，因为JS的代码在找元素的时候用id是最直接的，找到它之后改变文本叫【data.message】，就是出错的信息要帮你展示到页面上。

9.输入一个错误的用户名密码，也能像之前一样提示信息，但是现在后台发送请求的方式跟刚才可是完全不一样了，现在已经是AJAX请求了，最关键的一点你要会调起AJAX请求，如果你对AJAX完全不知道，那这个代码你一定是看不懂的，

 最重点的是前面要定义的响应数据的字典，然后用JsonResponse来将数据返回给前台，上送参数中要带着csrf的token，这个就是最基础的开发方式。

10.下面来看文章的点赞如何用AJAX的方式来实现，要对文章的【model】进行扩充，现在的models中间找到Bloginfo，文章的model中它没有点赞的字段，点赞这个字段跟浏览量是类似的，点赞数起个名字叫likes，是一个数值类型的字段，

 然后给一个默认值，因为是后添加的字段，一定要给一个默认值，然后verbose_name，名字叫点赞数，加了这个字段之后，大家一定要记得对数据库模型进行修改，MySql要重新建立表结构，这个命令是【ReadMe】。

11.先执行脚本更新，在终端中执行，bloginfo增加了一个字段likes，这就是执行的过程，再来执行脚本重建【migrate】，这样它会将生成的新的脚本，在数据库中真正映射出来，现在的这个bloginfo表多了一个likes字段，

 要为它增加点赞的视图，就是控制逻辑的这个代码，这个代码就直接给出函数【def likes】，有一个request的参数，先给出主干的代码，return JsonResponse，有个ret这样一个结果集的字典，这个字典中有两个元素，一个是【code】，

 默认是0，还有一个message，这种接口的标准应该一样都用单引。

12.点赞过程中一定要接收是对哪个文章点赞，比方说模拟一个参数blogid，是哪一篇文章，这个参数应该是request.从GET里取，这次来一个GET请求，get blogid，拿到文章内容，文章的id通过model去取到，blog等于models.Bloginfo.object.get，

 拿一条id等于blogid，这个是取到blog，如果拿到了这个记录说明文章是存在的，要给likes字段加一，回到model中要给它增加【add_one_likes】，注释就不要了，前面是一样的save，更新的是likes这个字段，这个就是点赞加一，

 然后views调用blog.add_one_likes，这个不叫views，是likes这个方法，完成对点赞的计数的保存，然后成功的返回给前端。

13.现在要配置路由，把login_ajax复制，改名字叫likes，里边用的是【likes】这个方法，点赞这个东西加到文章的详情页，加到blogdetail上，下面来容器【div】，里边加按钮【button】，然后它的class等于btn，用btn_link，

 里边写上赞一下或者是点赞，style等于text-align right，让它靠右对齐，就通过它来给文章增加点赞的数量，在阅读后面加一个点赞，然后button加id，这个id起名字叫likebutton，type要加上，type等于button，这个加全了，

 在最后加script代码，然后找到id叫likebutton的元素，给它绑定一个click事件，function里边加alert测试。

14.向【likes】这个地址发送请求，这次用的是get方法，这个参数在views里边，拿到这个参数名字叫blogid，可以直接就用blog.id，这个环境中它是有blog参数的，因为前面都在用blog，它是一个DetailView的返回结果，有上下文的变量叫blog，

 传id上去，对这个文章进行点赞的操作，然后打印返回的结果，其他的内容先注释掉，后台返回的内容code等于0 message等于OK，说明程序是执行成功的，刚才做的就是id等于4的这一个文章的点赞。

15.window.location=window.location是最简单的刷新网页的方式，相当于把整个页面又重新加载了一次，可以让AJAX请求从后台返回回来，这也是AJXA请求的优势，异步的JavaScript和Chanel就是在不刷新页面的情况下完成后台的交易请求，

 并且能够通过JS的代码改变这个3让它变成4，必须要拿到当时点完赞之后，后台返回一个真实的获赞的数量，回来改views，ret里边加likes这样一个变量，现在数据库里likes是多少就给它赋值到结果，并且带回到前端的网页。

16.回到detail这个页面，给这个标签加id，span.class是likes-count，它下面的a text改成code，data的likes属性现在是6，让它和点赞拼成一个字符串，然后重新赋值给标签，可以让页面在不刷新的情况下完成它的功能。

 这一讲学习了AJAX的开发，AJAX如果用好了用户体验度会变得非常的高，留作业，要把注册的这个页面回去自己动手改造。

以上就是AJAX请求实例-Python博客系统实战图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！