django中的ajax组件教程

异步JavaScript和XML (Ajax)被翻译成英语为“异步Javascript和XML”。也就是说，Javascript语言与服务器异步交互，传输的数据是XML(现在更多使用json数据)。

向服务器发送请求的方法

1.浏览器地址栏http://www.baidu.com默认为get请求2 .表单发送请求：get请求POST请求3 .标记href属性默认为GET请求4.ajax()

Ajax的特点

异步交互：客户端发送请求后，可以发送第二个请求，无需等待服务器响应；

部分刷新：浏览器页面的部分刷新

部分刷新是指当我们在博客公园注册新的博客时，当我们输入用户名并将鼠标移开时，我们会发送一个请求来验证该用户是否存在，如果存在，则通知用户该用户名已经注册。

基于jquery的Ajax请求

让我们使用pycharm重新创建一个名为Ajax_demo和app01的项目。

django的url控制器。django的contrib导入管理。从app01导入视图的URL导入路径URL模式=[路径(' admin/'，admin . site . URL)，路径(' index/'，视图。索引)、路径(' test_ajax/'、视图。test _ Ajax)，]当我们需要有相应的视图函数index和test _ Ajax时：

# app01 - views.pyfrom django .快捷键导入渲染，HttpResponse#在此创建您的视图. def index(request): return render(request，' index . html ')def test _ Ajax(request): return HttpResponse(' hello！“世界！”)匹配此处对应的视图，然后返回一个html页面：

# index.html！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :http://code . jquery.com/jquery-2 . 1 . 1 . min . js '/script/流浆池h3函数1:发送ajax请求/h3 p class='content'/p //此处内容为空button class=' BTN ' Ajax/button script $()。BTN ')。单击(function () {$)。Ajax ({url3360'/Test _ ajax/'，type:' get '，success:函数(数据){$(')。内容')。html(data)} })})/script/body/html的意思是当我们点击按钮时，点击动作被触发，然后发送一个Ajax请求，这样

当我们单击按钮时，我们发送了一个ajax请求：

此时，发送一个简单的ajax请求。

用ajax实现计算器

首先，让我们在index.html中做一个布局：

# index.htmlh3函数2:通过ajax实现的计算器/h3input type=' text ' class=' num 1 ' input type=' text ' class=' num 2 '=input type=' text ' id=' sum ' button class=' cal ' calculation/button $()。cal’)。单击(function(){ $)。ajax({ url:'/cal/'，type:'post '，data : { ' n1 ' : $(. num 1 ')。val()，' N2 ' : $(. num 2 ')。val()，}，success:function(数据){ console.log(数据)；$('#sum ')。val(数据)；}})})然后我们得到n1和n2的值，通过请求url发送到对应的视图，然后处理数据，最后得到结果返回到这个ajax。

# view . pydef cal(request): print(request . post)n1=int(request . post . get(' n1 '))N2=int(request . post . get(' N2 '))sum=n1 N2 return httpresponse(sum)此时应添加一个新的url控制器：

路径(' cal/'，views.cal)，

其次，配置文件设置中的这一行需要注释掉：

# ' django . middleware . csrf . csrfview middleware '，然后检查结果：

使用ajax实现登录认证

首先，我们需要开辟一条路线。当用户在浏览器中输入http://127.0.0.1/login_btn/时，与对应的视图匹配，所以：

# url控制器来自姜戈。django的contrib import adminfrom。URL导入路径从app01导入viewsurlppatterns=[path(' admin/'，admin . site . URL)，path('index/'，views.index)，path('test_ajax/'，views.test _ ajax)，path('cal/'，views.cal)，path('login/'，view。登录)，路径(' login_btn/'，views.login _ btn)，]# login_btn函数def login_btn(请求):返回呈现（请求，'登录BTN。html’)然后返回了这个超文本标记语言页面：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :http://代码。jquery。com/jquery-2。1 .1 .量滴js '/脚本/head dy H3利用创建交互式、快速动态网页应用的网页开发技术实现登陆认证/h3表单操作=' '用户名输入类型="文本"类="用户"密码输入类型='password' class='pwd '输入类型='按钮'值=' submit ' class=' log in _ BTN ' span class=' error '/span/form script $().登录_ BTN’.单击(函数(){ $).ajax({ url:'/login/'，type:'post '，data:{ 'user':$(').用户')。val()，' pwd':$(' .pwd ').val()，}，success:function(数据){ //此时需要进行转换console.log(数据类型));var data=JSON.parse(数据)console.log(类型为(数据));if(数据。用户){位置。http://。百度。com ' } else { $(' .错误')。html(data.msg).CSS({ ' color ' : ' red ' })} } })}/脚本/正文/html最后创建交互式、快速动态网页应用的网页开发技术将请求提交到了/login/中，然后进行匹配视图，然后就开始执行对应代码：

极好的登录（请求): #打印（请求。开机自检)用户=请求. POST.get('用户')pwd=请求. POST.get('pwd ')来自。模型导入用户用户=用户。对象。过滤器（用户=用户，pwd=pwd ).first() ret={ 'user': None，' msg': None }如果用户： ret['用户']=用户。用户else : ret[' msg ']='用户名或密码错误!'导入数据返回HttpResponse(json.dumps(ret))首先打开浏览器，输入错误的用户名和密码：

然后开始输入正确的用户名和密码，就会直接跳转到百度的首页了。

利用形式表单进行文件上传

# urls.pypath('file_put/'，views.file _ put)，# views.py #文件的上传如果请求，def file _ put(请求):方法==' POST ' :打印(请求.开机自检)返回渲染(请求，' file _ put。html')# file _ put。html！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题文件上传/标题/H3头像基于形式表单实现的文件上传/h3表单操作=' '方法=' post ' enctype=' multipart/form-data '用户名输入类型="文本"名称="用户"头像输入类型='文件'名称='头像'输入类型='提交'/表单/正文/html此时咱们输入完用户名和选中完图片后，点击提交咱们查看下打印的信息。

那么是我们的图片没有上传过来吗？当然不是的，是因为上传的图片就不在这里面。让我们在views.py中执行这个代码：

打印（请求。文件)

看到的是这个样子：

那么此时我们就可以确定，这个文件是上传过来了，存放在请求。文件中，那么咱们使用请求. FILES.get就可以把这个图片对象拿到了。

#视图。如果请求，py def file _ put(请求):方法==' POST ' :打印(请求.发布)# #打印（请求。正文)打印（请求。文件)#图片信息# 将文件给取出来img_obj=请求. FILES.get('头像')将打开(img_obj.name，' wb ')作为f:用于img_obj: f.write(线路)中的行，返回httpresponse(' ok！')返回渲染(请求，' file _ put。html’)那么此时直接上传的话，那么就会在当前项目下展示这张照片。

利用创建交互式、快速动态网页应用的网页开发技术实现文件上传

首先我们需要新开一个全球资源定位器(统一资源定位符)或者将之前的注释掉：

# urls.pypath('file_put/'，views.file _ put)，ajax提交文件的方式同样使用形式表单，但是不需要给投入设置名字属性，只需要设置班级或者编号就可以了：

# file_put.html表单操作方法=' post '用户名输入类型='text' id='user '头像输入类型='file' id='avatar '输入类型=' button ' class=' BTN ' value=' Ajax '/表单那么咱们需要给按钮设置点击点击动作：

$('.BTN ' .单击(函数(){ //涉及到文件上传需要创建上传对象var表单数据=新表单数据()；formdata.append('user '，$('#user ')).val())；formdata.append('avatar '，$('#avatar')[0]).文件[0]);$.ajax({ url: ' '，type:'post '，contentType:false，//交给上传处理编码processData:false，//对数据是否进行预处理如果不做预处理的话就不做任何编码了data:formdata，success:function(数据){ console.log(数据)} }) })最后在试图函数中进行文件保存操作：

如果请求，def file _ put(请求):方法==' POST ' :打印(' body '，request.body) #请求报文中的请求体数据打印(“开机自检”，请求发布)#如果contentType==urlencoded，则请求。邮政才有数据打印(“FILES”，请求. FIles)FIle _ obj=请求文件。获取('头像')以打开(file_obj.name，' wb ')作为f : for file _ obj : f . write(行)返回http响应(“确定”)返回渲染(请求，' file_put.html ')内容类型在咱们刚刚的形式表单的文件上传和创建交互式、快速动态网页应用的网页开发技术文件上传的时候，都涉及到一个请求头的东西，这个东西是什么呢？这个东西决定着服务器会按照哪种编码格式给你解码，当你默认不写的时候，此时的请求头是：应用程序/x-www-form-URL编码，当你想发送文件类的东西，此时的请求头应该是：表单-数据.

当服务器收到客户端发送过来的请求时，首先就会去查看请求头，判断你的请求头是什么，然后进行解码。

让我们分别看下这几个请求头：

默认值

应用程序/x-www-form-urlencoded:表单数据编码为键值对，分隔，可以当成咱们的得到请求中？后面的数据，让我们发送一个庶几乎看看：

表单操作='方法='发布'用户名输入类型="文本"名称="用户"密码输入类型='密码'名称='pwd '输入类型='提交'值='提交'/表单那么我们需要一个视图函数还进行处理：

如果请求，def file _ put(请求):方法==' POST ' :打印(' body '，request.body) #请求报文中的请求体数据打印(“开机自检”，请求发布)#如果contentType==urlencoded，则请求。邮政才有数据返回http响应(“确定”)返回渲染(请求，' file_put.html ')当我们在浏览器输入管理和123的时候，让我们来看下打印的结果是什么：

我们刚刚说过，当我们请求头什么都不写的话，那么就是默认的x-www-form-urlencoded，当请求头是这种的话，此时我们打印请求。邮政是有值的，也就这一种请求方式请求。邮政才有值。

让我们现在发送一个数据的数据

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :http://代码。jquery。com/jquery-2。1 .1 .量滴js '/script/head dyform action=' method=' post '用户名输入类型="文本"类="用户"密码输入类型='password' class='pwd '输入类型='按钮'值=' submit ' class=' BTN '/formscript $().BTN ' .单击(函数(){ $).ajax({ url: ' '，type:'post '，data : JSON。stringify({ a :1，b:2 })，success :函数(数据){ console。日志(数据)} })}))/脚本/正文/html视图函数中是这样的：

如果请求，def send _ JSON(请求):方法==' POST ' : print(' body '，request.body) print('post '，request .开机自检)打印("文件",请求. FILES)返回HttpResponse('ok！')返回渲染(请求，' send _ JSON。html’)当我们发送数据的时候，通过解码收到的就是这样的数据：

就和我们刚刚说的一样，当请求头是默认值的时候，请求。邮政才会有数据，其他的就没有。

总结

以上是边肖介绍的django中ajax组件教程的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！