Django Ajax の使用
- 巴扎黑オリジナル
- 2017-06-23 14:49:041788ブラウズ
概要:
AJAX = 非同期 JavaScript および XML (非同期 JavaScript および XML)。
AJAX は新しいプログラミング言語ではなく、既存の標準を使用する新しい方法です。
AJAX は、サーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。
Ajax
多くの場合、Web ページ上で操作をリクエストするときに、ページを更新する必要はありません。この機能を実現する技術には Ajax が必要です。
jQueryのAjaxは、ページを更新せずにバックグラウンドでデータをリクエストまたは送信する機能を実現できるようになりました。そのため、最初にjqueyをダウンロードするのはバージョンが高いほど良いです。
1. Ajax は単純なデータ型を送信します:
html コード: ここでは単純な文字列のみを送信します
views.py
1 #coding:utf8 2 from django.shortcuts import render,HttpResponse,render_to_response 3 4 def Ajax(request): 5 if request.method=='POST': 6 print request.POST 7 8 return HttpResponse('执行成功') 9 else:10 return render_to_response('app03/ajax.html')ajax.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ajax</title> 6 </head> 7 <body> 8 <input id='name' type='text' /> 9 <input type='button' value='点击执行Ajax请求' onclick='DoAjax()' />10 11 <script src='/static/jquery/jquery-3.2.1.js'></script>12 <script type='text/javascript'>13 function DoAjax(){14 var temp = $('#name').val();15 $.ajax({16 url:'app03/ajax/',17 type:'POST',18 data:{data:temp},19 success:function(arg){20 console.log(arg);21 },22 error:function(){23 console.log('failed')24 }25 });26 }27 </script>28 </html>実行、結果:
2. Ajax は複雑なデータ型を送信します:
html コード: 辞書データ型を含むリストのみをここに送信します
送信されるデータ型による リストの形式について辞書を使用するには、事前に文字列形式に変換する必要があります。そうしないと、バックグラウンド プログラムによって受信されるデータ形式が必要なタイプではないため、ajax 経由でデータを送信するときに JSON が必要になります
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ajax</title> 6 </head> 7 <body> 8 <input id='name' type='text' /> 9 <input type='button' value='点击执行Ajax请求' onclick='DoAjax()' />10 11 <script src='/static/jquery/jquery-3.2.1.js'></script>12 <script type='text/javascript'>13 function DoAjax(){14 var temp = $('#name').val();15 $.ajax({16 url:'app03/ajax/',17 type:'POST',18 data:{data:temp},19 success:function(arg){20 var obj=jQuery.parseJSON(arg);21 console.log(obj.status);22 console.log(obj.msg);23 console.log(obj.data);24 $('#name').val(obj.msg);25 },26 error:function(){27 console.log('failed')28 }29 });30 }31 </script>32 </html>views.py
1 #coding:utf8 2 from django.shortcuts import render,HttpResponse,render_to_response 3 import json 4 5 # Create your views here. 6 def Ajax(request): 7 if request.method=='POST': 8 print request.POST 9 data = {'status':0,'msg':'请求成功','data':['11','22','33']}10 return HttpResponse(json.dumps(data))11 12 else:13 return render_to_response('app03/ajax.html') 印刷データスタイル:
jQuery Ajaxメソッドリスト
1 jQuery.get(...) 2 所有参数： 3 url: 待载入页面的URL地址 4 data: 待发送 Key/value 参数。 5 success: 载入成功时回调函数。 6 dataType: 返回内容格式，xml, json, script, text, html 7 8 9 jQuery.post(...)10 所有参数：11 url: 待载入页面的URL地址12 data: 待发送 Key/value 参数13 success: 载入成功时回调函数14 dataType: 返回内容格式，xml, json, script, text, html15 16 17 jQuery.getJSON(...)18 所有参数：19 url: 待载入页面的URL地址20 data: 待发送 Key/value 参数。21 success: 载入成功时回调函数。22 23 24 jQuery.getScript(...)25 所有参数：26 url: 待载入页面的URL地址27 data: 待发送 Key/value 参数。28 success: 载入成功时回调函数。29 30 31 jQuery.ajax(...)32 33 部分参数：34 35 url：请求地址36 type：请求方式，GET、POST（1.9.0之后用method）37 headers：请求头38 data：要发送的数据39 contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")40 async：是否异步41 timeout：设置请求超时时间（毫秒）42 43 beforeSend：发送请求前执行的函数(全局)44 complete：完成之后执行的回调函数(全局)45 success：成功之后执行的回调函数(全局)46 error：失败之后执行的回调函数(全局)47 48 49 accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型50 dataType：将服务器端返回的数据转换成指定类型51 "xml": 将服务器端返回的内容转换成xml格式52 "text": 将服务器端返回的内容转换成普通文本格式53 "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。54 "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式55 "json": 将服务器端返回的内容转换成相应的JavaScript对象56 "jsonp": JSONP 格式57 使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数58 59 如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string60 61 converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数62 $.ajax({63 accepts: {64 mycustomtype: 'application/x-some-custom-type'65 },66 67 // Expect a `mycustomtype` back from server68 dataType: 'mycustomtype'69 70 // Instructions for how to deserialize a `mycustomtype`71 converters: {72 'text mycustomtype': function(result) {73 // Do Stuff74 return newresult;75 }76 },77 });ファイルアップロードの実装:
views.py
rreee
put_file.html
りー
以上がDjango Ajax の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。