search

Home >Web Front-end >JS Tutorial >Django Ajax usage tutorial

Django Ajax usage tutorial

亚连
亚连Original
2018-05-22 13:57:441343browse

This article mainly introduces the usage tutorial of Django Ajax. Friends who need it can refer to it

Introduction:

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

AJAX is not a new programming language, but a new way of using existing standards.

AJAX is the art of exchanging data with a server and updating parts of a web page without reloading the entire page.

Ajax

Many times, when we request an operation on a web page, we do not need to refresh the page. The technology to achieve this function requires Ajax!

Ajax in jQuery can realize the function of requesting or submitting data to the background without refreshing the page. Now it is used to do ajax in django, so download jquey first. The higher the version, the better.

1. Ajax sends simple data type:

html code: Here we only send a simple string

views.py

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

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>

Run, result:

## 2. Ajax sends complex data types:

HTML code: Only send a list containing dictionary data type here

Since the data type sent is in the format of list dictionary, we must convert them into string form in advance, otherwise the data format received by the background program It is not the type we want, so 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>

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;)

is required when transmitting data via ajax.

Print data style:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax cooperates with node js multer to implement file upload function

##dwz How to remove ajaxloading (graphic tutorial )


Principles of Ajax cross-domain requests (graphic tutorial)


The above is the detailed content of Django Ajax usage tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Implementation code for django ajax submit comments and automatically refresh functionNext article：Implementation code for django ajax submit comments and automatically refresh function

Related articles

See more