Django Ajax の使い方チュートリアル-jsチュートリアル-php.cn

Django Ajax の使い方チュートリアル

亚连

リリース： 2018-05-22 13:57:44

オリジナル

1292 人が閲覧しました

この記事では主に Django Ajax の使い方チュートリアルを紹介します。必要な方は参考にしてください。

はじめに:

AJAX = Asynchronous JavaScript and XML (非同期 JavaScript と XML)。

AJAX は新しいプログラミング言語ではなく、既存の標準を使用する新しい方法です。

AJAX は、サーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。

Ajax

多くの場合、Web ページ上で操作をリクエストするときに、ページを更新する必要はありません。この機能を実現する技術には Ajax が必要です。

jQueryのAjaxは、ページを更新せずにバックグラウンドでデータをリクエストまたは送信する機能を実現できるようになりました。そのため、最初にjqueyをダウンロードするのはバージョンが高いほど良いです。

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

ログイン後にコピー

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>

ログイン後にコピー

走って、結果:

2. 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>

ログイン後にコピー

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

ログイン後にコピー

印刷データ形式: