ホームページ > 記事 > ウェブフロントエンド > jQuery と JS を使用した AJAX の実装を説明する例
jQuery と JS を使用した AJAX の実装を説明する例
- coldplay.xixi転載
- 2020-12-08 17:38:233029ブラウズ
#AJAX チュートリアル列の例では、jQuery と JS を使用して AJAX を実装する方法を紹介します
#関連する無料学習の推奨事項:ajax チュートリアル (ビデオ)
AJAX 準備の知識: JSON
JSON とは何ですか? #JSON は JavaScript オブジェクト表記法を指します
JSON は軽量のテキスト データ交換形式です
JSON は言語に依存しません*
JSON は自己説明が容易で理解しやすい
* JSON は JavaScript 構文を使用してデータ オブジェクトを記述しますが、JSON は言語やプラットフォームに依存しません。 JSON パーサーと JSON ライブラリは、さまざまなプログラミング言語をサポートしています。
修飾された json オブジェクト:
["one","two","three"]{"one":1,"two":2,"three":3}{"names":["张三","李四"]}[{"name":"张三"},{"name":"李四"}]非修飾の json オブジェクト:
{name:"张三",'age':32}//属性名必须使用双引号[32,64,128,0xFFF]//不能使用十六进制值{"name":"张三","age":undefined}//不能使用undefined{"name":"张三","birthday":newDate('Fri,26Aug201107:13:10GMT'),"getName":function(){returnthis.name;}//不能使用函数和日期对象}stringify および parse メソッドJavaScript での 2 つのメソッドJSON オブジェクトと文字列の変換:
JSON.parse(): JSON 文字列を JavaScript オブジェクトに変換するために使用されます
JSON.parse('{"name":"Q1mi"}');
JSON.parse('{name:"Q1mi"}') ; // 错误
JSON.parse('[18,undefined]') ; // 错误JSON.stringify(): JavaScript の値が変換されるために使用されますJSON文字列に変換します。
JSON.stringify({"name":"Q1mi"})XML との比較JSON 形式は、扱いにくく面倒な XML 形式を置き換えることを目的として、2001 年に Douglas Crockford によって提案されました。
JSON 形式には 2 つの大きな利点があります: 記述が簡単で一目でわかりやすいこと、ネイティブ JavaScript 構文に準拠しており、追加の解析コードを追加せずに解釈エンジンによって直接処理できることです。したがって、JSON はすぐに受け入れられ、主要な Web サイトでデータを交換するための標準形式となり、ECMAScript 5 に書き込まれて標準の一部になりました。
XML と JSON はどちらも構造化メソッドを使用してデータをマークします。以下で簡単に比較してみましょう。
中国の一部の省と市のデータは XML で次のように表現されます:
<?xml version="1.0" encoding="utf-8"?><country><name>中国</name><province><name>黑龙江</name><cities><city>哈尔滨</city><city>大庆</city></cities></province><province><name>广东</name><cities><city>广州</city><city>深圳</city><city>珠海</city></cities></province><province><name>台湾</name><cities><city>台北</city><city>高雄</city></cities></province><province><name>新疆</name><cities><city>乌鲁木齐</city></cities></province></country>XML格式数据
XML 形式のデータ
JSON のデータは次のように表現されます:
{"name":"中国","province":[{"name":"黑龙江","cities":{"city":["哈尔滨","大庆"]}},{"name":"广东","cities":{"city":["广州","深圳","珠海"]}},{"name":"台湾","cities":{"city":["台北","高雄"]}},{"name":"新疆","cities":{"city":["乌鲁木齐"]}}]}JSON格式数据JSON 形式のデータ
上記の両端のコードからわかるように、JSON のシンプルな構文形式と明確な階層構造は、XML よりも明らかに読みやすく、データ交換の点でも JSON 以来容易です。 XML よりも使用する文字数がはるかに少ないため、データの送信に占有される帯域幅を大幅に節約できます。
AJAX の概要AJAX (Asynchronous Javascript And XML) は、中国語に翻訳すると「非同期 JavaScript および XML」となります。つまり、JavaScript 言語を使用してサーバーと非同期に対話し、送信されるデータは XML です (もちろん、送信されるデータは XML だけではありません)。
AJAX は新しいプログラミング言語ではなく、既存の標準を使用する新しい方法です。
AJAX の最大の利点は、ページ全体をリロードすることなく、サーバーとデータを交換し、Web ページのコンテンツの一部を更新できることです。 (この機能により、ユーザーは無意識のうちに要求と応答のプロセスを完了しているという感覚が得られます)
AJAX はブラウザーのプラグインを必要としませんが、ユーザーはブラウザー上で JavaScript の実行を許可する必要があります。
- 同期対話: クライアントはリクエストを送信した後、2 番目のリクエストを送信する前にサーバーの応答が完了するまで待つ必要があります。非同期対話: クライアントはリクエストを発行した後、サーバーの応答が完了するのを待たずに 2 番目のリクエストを発行できます。
- 例
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>AJAX局部刷新实例</title></head><body><inputtype="text"id="i1">+<inputtype="text"id="i2">=<inputtype="text"id="i3"><inputtype="button"value="AJAX提交"id="b1"><scriptsrc="/static/jquery-3.2.1.min.js"></script><script>$("#b1").on("click",function(){$.ajax({url:"/ajax_add/",type:"GET",data:{"i1":$("#i1").val(),"i2":$("#i2").val()},success:function(data){$("#i3").val(data);}})})</script></body></html>HTML部分代码HTML 部分コード
def ajax_demo1(request):
return render(request, "ajax_demo1.html")
def ajax_add(request):
i1 = int(request.GET.get("i1"))
i2 = int(request.GET.get("i2"))
ret = i1 + i2
return JsonResponse(ret, safe=False)
views.py
views.py
rlpatterns = [
...
url(r'^ajax_add/', views.ajax_add),
url(r'^ajax_demo1/', views.ajax_demo1),
...
]
urls.pyAJAX 一般的なアプリケーション シナリオ
検索エンジンは、入力されたキーワードに基づいて、キーワードを取得するよう自動的に要求します。ユーザー。 。
もう 1 つの非常に重要なアプリケーション シナリオは、登録時のユーザー名のチェックです。 実際、ここでは AJAX テクノロジーが使用されています。ファイル ボックスの入力が変更されると、AJAX テクノロジを使用してサーバーにリクエストが送信され、サーバーはブラウザーへのクエリ結果に応答し、最終的にバックエンドによって返された結果を表示します。
ページはプロセス全体で更新されるのではなく、ページが部分的に更新されるだけです。
リクエストが送信された後、ブラウザはサーバーの応答を待たずに他の操作を実行することもできます。
ユーザー名を入力し、カーソルを他のフォーム項目に移動すると、ブラウザは AJAX テクノロジを使用してサーバーにリクエストを行います。サーバーは、lemontree7777777 という名前のユーザーが存在するかどうかをクエリします。最後に、サーバーは戻り値を返します。名前を示す場合は true。ユーザーレモンツリー 7777777 はすでに存在しており、結果を取得するとブラウザーに「ユーザー名は登録されました!」と表示されます。
ページはプロセス全体で更新されず、部分的にのみ更新されます;
リクエストが発行された後、ブラウザはサーバーの応答結果を待たずに他の操作を実行できます;
AJAX の長所と短所 利点:AJAX は JavaScript テクノロジを使用してサーバーに非同期リクエストを送信します。 #AJAX リクエストではページ全体を更新する必要はありません ;
サーバー応答コンテンツはページ全体ではなくページの一部であるため、AJAX のパフォーマンスは高くなります;
AJAX jQuery によって実装AJAX リクエストを送信する jQuery の最も基本的な例:
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>ajaxtest</title><scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script></head><body><buttonid="ajaxTest">AJAX测试</button><script>$("#ajaxTest").click(function(){$.ajax({ url:"/ajax_test/", type:"POST", data:{username:"Q1mi",password:123456}, success:function(data){alert(data)}})})</script></body></html>views.py：def ajax_test(request): user_name = request.POST.get("username") password = request.POST.get("password") print(user_name, password) return HttpResponse("OK")
data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。
defajax_test(request):user_name=request.POST.get("username")password=request.POST.get("password")print(user_name,password)returnHttpResponse("OK")JS实现AJAX
varb2=document.getElementById("b2");b2.onclick=function(){// 原生JSvarxmlHttp=newXMLHttpRequest();xmlHttp.open("POST","/ajax_test/",true);xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlHttp.send("username=q1mi&password=123456");xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState===4&&xmlHttp.status===200){alert(xmlHttp.responseText);}};};AJAX请求如何设置csrf_token
方式1
通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。
$.ajax({ url:"/cookie_ajax/",
type:"POST", data:{"username":"Q1mi","password":123456,"csrfmiddlewaretoken":
$("[name = 'csrfmiddlewaretoken']").val()// 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中}, success:function(data){console.log(data);}})方式2
通过获取返回的cookie中的字符串 放置在请求头中发送。
注意：需要引入一个jquery.cookie.js插件。
$.ajax({ url:"/cookie_ajax/", type:"POST", headers:
{"X-CSRFToken":$.cookie('csrftoken')},// 从Cookie取csrftoken，并设置到请求头中data:{"username":"Q1mi","password":123456},
success:function(data){console.log(data);}})或者用自己写一个getCookie方法：
functiongetCookie(name){varcookieValue=null;if(document.cookie&&document.cookie!==''){varcookies=document.cookie.split(';');for(vari=0;i<cookies.length;i++){varcookie=jQuery.trim(cookies[i]);// Does this cookie string begin with the name we want?if(cookie.substring(0,name.length+1)===(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}returncookieValue;}varcsrftoken=getCookie('csrftoken');每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。
注意：
如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。functioncsrfSafeMethod(method){// these HTTP
methods do not require CSRF protectionreturn(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));}$.ajaxSetup({ beforeSend:function(xhr,settings){if(!csrfSafeMethod(settings.type)&&!this.crossDomain){xhr.setRequestHeader("X-CSRFToken",csrftoken);}}});如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。
这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。
django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def login(request): pass
更多细节详见：Djagno官方文档中关于CSRF的内容
AJAX上传文件
XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。下面就具体
首先看一下formData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：
介绍一下如何利用 FormData 来上传文件。
django.views.decorators.csrfimportensure_csrf_cookie@ensure_csrf_cookiedeflogin(request):pass
或者使用
var form = document.getElementById("form1");
var fd = new FormData(form);这样也可以直接通过ajax 的 send() 方法将 fd 发送到后台。
注意：由于 FormData 是 XMLHttpRequest Level 2 新增的接口，现在 低于IE10 的IE浏览器不支持 FormData。
练习（用户名是否已被注册）
功能介绍
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。
案例分析
页面中给出注册表单；
在username input标签中绑定onblur事件处理函数。
当input标签失去焦点后获取 username表单字段的值，向服务端发送AJAX请求；
django的视图函数中处理该请求，获取username值，判断该用户在数据库中是否被注册，如果被注册了就返回“该用户已被注册”，否则响应“该用户名可以注册”。
序列化
Django内置的serializers
def books_json(request): book_list = models.Book.objects.all()[0:10]
from django.core import serializers ret = serializers.serialize("json", book_list) return HttpResponse(ret)以上がjQuery と JS を使用した AJAX の実装を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。