Django Ajax的使用教程-tutorial js-php.cn

Django Ajax的使用教程

亚连

Lepaskan： 2018-05-22 13:57:44

asal

1327 orang telah melayarinya

这篇文章主要介绍了Django Ajax的使用教程,需要的朋友可以参考下

简介：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

Ajax

　　很多时候，我们在网页上请求操作时，不需要刷新页面。实现这种功能的技术就要Ajax！

jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能，现用它来做django中的ajax，所以先把jquey下载下来，版本越高越好。

一、ajax发送简单数据类型：

html代码：在这里我们仅发送一个简单的字符串

views.py

 #coding:utf8
 from django.shortcuts import render,HttpResponse,render_to_response
 def Ajax(request):
   if request.method==&#39;POST&#39;:
     print request.POST
     return HttpResponse(&#39;执行成功&#39;)
   else:
     return render_to_response(&#39;app03/ajax.html&#39;)

Salin selepas log masuk

ajax.html

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Ajax</title>
 </head>
 <body>
   <input id=&#39;name&#39; type=&#39;text&#39; />
   <input type=&#39;button&#39; value=&#39;点击执行Ajax请求&#39; onclick=&#39;DoAjax()&#39; />
   <script src=&#39;/static/jquery/jquery-3.2.1.js&#39;></script>
   <script type=&#39;text/javascript&#39;>
   function DoAjax(){
     var temp = $(&#39;#name&#39;).val();
     $.ajax({
       url:&#39;app03/ajax/&#39;,
       type:&#39;POST&#39;,
       data:{data:temp},
       success:function(arg){
         console.log(arg);
       },
       error:function(){
         console.log(&#39;failed&#39;)
       }
     });
   }
   </script>
 </html>

Salin selepas log masuk

运行，结果：

二、ajax发送复杂的数据类型：

html代码：在这里仅发送一个列表中包含字典数据类型

由于发送的数据类型为列表字典的格式，我们提前要把它们转换成字符串形式，否则后台程序接收到的数据格式不是我们想要的类型，所以在ajax传输数据时需要JSON

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-">
 <title>Ajax</title>
 </head>
 <body>
   <input id=&#39;name&#39; type=&#39;text&#39; />
   <input type=&#39;button&#39; value=&#39;点击执行Ajax请求&#39; onclick=&#39;DoAjax()&#39; />
   <script src=&#39;/static/jquery/jquery-3.2.1.js&#39;></script>
   <script type=&#39;text/javascript&#39;>
   function DoAjax(){
     var temp = $(&#39;#name&#39;).val();
     $.ajax({
       url:&#39;app03/ajax/&#39;,
       type:&#39;POST&#39;,
       data:{data:temp},
       success:function(arg){
         var obj=jQuery.parseJSON(arg);
         console.log(obj.status);
         console.log(obj.msg);
         console.log(obj.data);
         $(&#39;#name&#39;).val(obj.msg);
       },
       error:function(){
         console.log(&#39;failed&#39;)
       }
     });
   }
   </script>
 </html>

Salin selepas log masuk

views.py

 #coding:utf
 from django.shortcuts import render,HttpResponse,render_to_response
 import json
 # Create your views here.
 def Ajax(request):
   if request.method==&#39;POST&#39;:
     print request.POST
     data = {&#39;status&#39;:,&#39;msg&#39;:&#39;请求成功&#39;,&#39;data&#39;:[&#39;&#39;,&#39;&#39;,&#39;&#39;]}
     return HttpResponse(json.dumps(data))
   else:
     return render_to_response(&#39;app/ajax.html&#39;)

Salin selepas log masuk

打印数据样式：