Beispiele zur Erläuterung der Implementierung von AJAX mit jQuery und JS

AJAX-TutorialDie Spaltenbeispiele stellen die Methode zur Implementierung von AJAX mit jQuery und JS vor

Verwandte kostenlose Lernempfehlungen: Ajax-Tutorial (Video)

A Kenntnisse zur JAX-Vorbereitung: JSON

Was ist JSON?

JSON bezieht sich auf die JavaScript-Objektnotation.

JSON ist ein leichtes Textdatenaustauschformat.

JSON ist sprachunabhängig JSON bleibt sprach- und plattformunabhängig. JSON-Parser und JSON-Bibliotheken unterstützen viele verschiedene Programmiersprachen.

Qualifizierte JSON-Objekte:

["one","two","three"]{"one":1,"two":2,"three":3}{"names":["张三","李四"]}[{"name":"张三"},{"name":"李四"}]

Unqualifizierte JSON-Objekte:

{name:"张三",'age':32}//属性名必须使用双引号[32,64,128,0xFFF]//不能使用十六进制值{"name":"张三","age":undefined}//不能使用undefined{"name":"张三","birthday":newDate('Fri,26Aug201107:13:10GMT'),"getName":function(){returnthis.name;}//不能使用函数和日期对象}

Stringify- und Parse-Methoden

Zwei Methoden zur JSON-Objekt- und String-Konvertierung in JavaScript: JSON.parse(): Verwendung Wird zum Konvertieren eines JSON-Strings verwendet in ein JavaScript-Objekt

JSON.parse('{"name":"Q1mi"}'); 
JSON.parse('{name:"Q1mi"}') ; // 错误 
JSON.parse('[18,undefined]') ; // 错误

JSON.stringify(): Wird verwendet, um einen JavaScript-Wert in einen JSON-String zu konvertieren.

JSON.stringify({"name":"Q1mi"})

Vergleich mit XML

Das JSON-Format wurde 2001 von Douglas Crockford mit dem Ziel vorgeschlagen, das umständliche und umständliche XML-Format zu ersetzen. Das JSON-Format hat zwei wesentliche Vorteile: Es ist einfach zu schreiben und auf einen Blick klar, es entspricht der nativen JavaScript-Syntax und kann direkt von der Interpretations-Engine verarbeitet werden, ohne dass zusätzlicher Parsing-Code hinzugefügt werden muss. Daher wurde JSON schnell akzeptiert und zum Standardformat für den Datenaustausch auf großen Websites. Es wurde in ECMAScript 5 geschrieben und wurde Teil des Standards.

Sowohl XML als auch JSON verwenden strukturierte Methoden zum Markieren von Daten. Lassen Sie uns unten einen einfachen Vergleich anstellen.

Die Daten einiger Provinzen und Städte in China werden in XML wie folgt dargestellt:

<?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格式数据

Daten im XML-Format

werden in JSON wie folgt dargestellt:

{"name":"中国","province":[{"name":"黑龙江","cities":{"city":["哈尔滨","大庆"]}},{"name":"广东","cities":{"city":["广州","深圳","珠海"]}},{"name":"台湾","cities":{"city":["台北","高雄"]}},{"name":"新疆","cities":{"city":["乌鲁木齐"]}}]}JSON格式数据

JSON-Formatdaten

Wie aus den beiden oben genannten ersichtlich ist: Am Ende des Codes verfügt JSON über ein einfaches Syntaxformat und Klarheit. Die hierarchische Struktur von JSON ist offensichtlich einfacher zu lesen als XML. Da JSON im Hinblick auf den Datenaustausch viel weniger Zeichen als XML verwendet, kann die durch die Datenübertragung belegte Bandbreite erheblich eingespart werden .

Einführung in AJAX

AJAX (Asynchronous Javascript And XML) heißt ins Chinesische übersetzt „asynchronous Javascript and XML“. Das heißt, die Javascript-Sprache wird verwendet, um asynchron mit dem Server zu interagieren, und die übertragenen Daten sind XML (natürlich sind die übertragenen Daten nicht nur XML). AJAX ist keine neue Programmiersprache, sondern eine neue Art, bestehende Standards zu nutzen.

Der größte Vorteil von AJAX besteht darin, dass es Daten mit dem Server austauschen und einen Teil des Webseiteninhalts aktualisieren kann, ohne die gesamte Seite neu laden zu müssen. (Diese Funktion gibt Benutzern das Gefühl, den Anfrage- und Antwortprozess unbewusst abzuschließen.)

AJAX erfordert keine Browser-Plug-Ins, erfordert jedoch, dass der Benutzer die Ausführung von JavaScript im Browser zulässt.

Synchronische Interaktion: Nachdem der Client eine Anfrage gestellt hat, muss er auf das Ende der Serverantwort warten, bevor er eine zweite Anfrage stellen kann.

• Asynchrone Interaktion: Nachdem der Client eine Anfrage gestellt hat, ist dies nicht erforderlich um auf das Ende der Serverantwort zu warten. Stellen Sie eine zweite Anfrage.

• Beispiel

Die Seite gibt zwei Ganzzahlen ein, überträgt sie über AJAX an das Backend, berechnet das Ergebnis und gibt es zurück.

<!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-Teilecode

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

AJAX häufige Anwendungsszenarien

Die Suchmaschine fordert automatisch zum Abrufen von Schlüsselwörtern basierend auf den vom Benutzer eingegebenen Schlüsselwörtern auf. Ein weiteres sehr wichtiges Anwendungsszenario ist die Überprüfung der Duplizierung von Benutzernamen bei der Registrierung.

Tatsächlich kommt hier die AJAX-Technologie zum Einsatz! Wenn sich die Eingabe im Dateifeld ändert, senden Sie mithilfe der AJAX-Technologie eine Anfrage an den Server. Anschließend antwortet der Server auf die Abfrageergebnisse an den Browser und zeigt schließlich die vom Backend zurückgegebenen Ergebnisse an.

Die Seite wird während des gesamten Vorgangs nicht aktualisiert, es werden nur Teilpositionen auf der Seite aktualisiert!

Nachdem die Anfrage gesendet wurde, kann der Browser auch andere Vorgänge ausführen, ohne auf die Antwort des Servers warten zu müssen!

Wenn Sie den Benutzernamen eingeben und den Cursor auf andere Formularelemente bewegen, sendet der Browser mithilfe der AJAX-Technologie eine Anfrage an den Server. Der Server fragt ab, ob der Benutzer mit dem Namen „lemontree7777777“ existiert dass der Benutzer mit dem Namen „lemontree7777777“ bereits existiert und der Browser nach Erhalt des Ergebnisses „Der Benutzername wurde registriert!“ anzeigt.

Die Seite wird während des gesamten Vorgangs nicht aktualisiert, sondern nur teilweise.

Nachdem die Anfrage gesendet wurde, kann der Browser andere Vorgänge ausführen, ohne auf das Ergebnis der Serverantwort zu warten.

Vor- und Nachteile von AJAX Vorteile:

AJAX verwendet JavaScript-Technologie, um asynchrone Anfragen an den Server zu senden; AJAX-Anfragen müssen nicht die gesamte Seite aktualisieren;

Da der Server-Antwortinhalt nicht mehr die gesamte Seite ist, sondern ein Teil des Inhalts die Seite, AJAX hat eine hohe Leistung;

implementiert durch jQuery AJAX

Das einfachste Beispiel für das Senden einer AJAX-Anfrage mit 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")

$.ajax-Parameter

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!==&#39;&#39;){varcookies=document.cookie.split(&#39;;&#39;);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+&#39;=&#39;)){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}returncookieValue;}varcsrftoken=getCookie(&#39;csrftoken&#39;);

每一次都这么写太麻烦了，可以使用$.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)

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung der Implementierung von AJAX mit jQuery und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!