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

Django Ajax の使用方法

php中世界最好的语言

リリース： 2018-03-31 15:30:28

オリジナル

1702 人が閲覧しました

今回は、Django Ajax の使い方と、Django Ajax を使用する際の注意事項を紹介します。実際の事例を見てみましょう。

概要:

AJAX = 非同期 JavaScript および XML (非同期 JavaScript および XML)。

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

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

Ajax

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

ajax は、ページを更新せずにバックグラウンドでデータをリクエストまたは送信する機能を実現できるようになりました。現在、django で ajax を行うために使用されているため、jquey のバージョンが高いほど良いです。

1. Ajax は単純な データ型を送信します:

html コード: ここでは単純な

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 = $('#name').val();
     $.ajax({
       url:'app03/ajax/',
       type:'POST',
       data:{data:temp},
       success:function(arg){
         console.log(arg);
       },
       error:function(){
         console.log('failed')
       }
     });
   }
   </script>
 </html>

ログイン後にコピー

実行、結果のみを送信します。

2. Ajax は複雑なデータ型を送信します:

html コード: 辞書データ型を含むリストのみがここに送信されます

送信されるデータ型は list Dictionary の形式であるため、事前に文字列形式に変換する必要があります。そうしないと、バックグラウンドプログラムによって受信されるデータ形式が必要なタイプではないため、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 = $('#name').val();
     $.ajax({
       url:'app03/ajax/',
       type:'POST',
       data:{data:temp},
       success:function(arg){
         var obj=jQuery.parseJSON(arg);
         console.log(obj.status);
         console.log(obj.msg);
         console.log(obj.data);
         $('#name').val(obj.msg);
       },
       error:function(){
         console.log('failed')
       }
     });
   }
   </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=='POST':
     print request.POST
     data = {'status':,'msg':'请求成功','data':['','','']}
     return HttpResponse(json.dumps(data))
   else:
     return render_to_response('app/ajax.html')

ログイン後にコピー

印刷データスタイル: