Exemples pour expliquer l'implémentation d'AJAX avec jQuery et JS

Tutoriel AJAXL'exemple de colonne présente la méthode d'implémentation d'AJAX avec jQuery et JS

Recommandations d'apprentissage gratuites associées : Tutoriel ajax(vidéo)

Connaissances de préparation AJAX : JSON

Qu'est-ce que JSON ?

JSON fait référence à la notation d'objet JavaScript

JSON est un format léger d'échange de données textuelles

JSON est indépendant du langage*

JSON est auto- décrivant et plus facile à comprendre

* JSON utilise la syntaxe JavaScript pour décrire les objets de données, mais JSON reste indépendant du langage et de la plate-forme. Les analyseurs JSON et les bibliothèques JSON prennent en charge de nombreux langages de programmation différents.

Objet json qualifié :

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

Objet json non qualifié :

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

méthode stringify et parse

À propos de JavaScript Deux méthodes pour Conversion d'objets et de chaînes JSON :

JSON.parse() : utilisé pour convertir une chaîne JSON en un objet JavaScript

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

JSON.stringify() : utilisé pour convertir les valeurs JavaScript sont converties aux chaînes JSON.

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

Comparaison avec XML

Le format JSON a été proposé par Douglas Crockford en 2001, dans le but de remplacer le format XML encombrant et encombrant.

Le format JSON présente deux avantages significatifs : il est simple à écrire et clair en un coup d'œil ; il est conforme à la syntaxe native JavaScript et peut être directement traité par le moteur d'interprétation sans ajouter de code d'analyse supplémentaire. Par conséquent, JSON a été rapidement accepté et est devenu le format standard pour l'échange de données sur les principaux sites Web. Il a été écrit dans ECMAScript 5 et est devenu partie intégrante de la norme.

XML et JSON utilisent des méthodes structurées pour marquer les données. Faisons une comparaison simple ci-dessous.

Les données de certaines provinces et villes de Chine sont exprimées en XML comme suit :

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

Données au format XML

Les données en JSON sont exprimées comme suit :

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

Données au format JSON

Comme le montrent les deux extrémités du code ci-dessus, le format de syntaxe simple de JSON et sa structure hiérarchique claire sont évidemment plus faciles à lire que XML, et en termes d'échange de données, puisque JSON utilise beaucoup moins de caractères que XML, il peut considérablement économiser la bande passante occupée par la transmission des données.

Introduction à AJAX

AJAX (Asynchronous Javascript And XML) traduit en chinois est « Javascript et XML asynchrones ». Autrement dit, le langage Javascript est utilisé pour interagir de manière asynchrone avec le serveur et les données transmises sont XML (bien entendu, les données transmises ne sont pas uniquement XML).

AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les standards existants.

Le plus gros avantage d'AJAX est qu'il peut échanger des données avec le serveur et mettre à jour une partie du contenu de la page Web sans recharger la page entière. (Cette fonctionnalité donne aux utilisateurs le sentiment de terminer le processus de demande et de réponse inconsciemment)

AJAX ne nécessite aucun plug-in de navigateur, mais nécessite que l'utilisateur autorise l'exécution de JavaScript sur le navigateur.

• Interaction synchrone : une fois que le client a envoyé une demande, il doit attendre que la réponse du serveur soit terminée avant d'envoyer une deuxième demande

• Interaction asynchrone : une fois que le client a émis une requête, il peut émettre une deuxième requête sans attendre la réponse du serveur.

Exemple

La page saisit deux entiers, les transmet au backend via AJAX, calcule le résultat et le renvoie.

<!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部分代码

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

Scénarios d'application courants AJAX

Le moteur de recherche vous invite automatiquement à récupérer des mots-clés en fonction des mots-clés saisis par l'utilisateur.

Un autre scénario d'application très important consiste à vérifier la duplication du nom d'utilisateur lors de l'inscription.

En fait, la technologie AJAX est utilisée ici ! Lorsque l'entrée dans la zone de fichier change, utilisez la technologie AJAX pour envoyer une requête au serveur, puis le serveur répondra aux résultats de la requête au navigateur et affichera enfin les résultats renvoyés par le backend.

La page n'est pas rafraîchie pendant tout le processus, c'est juste un rafraîchissement partiel de la page !

Une fois la requête envoyée, le navigateur peut également effectuer d'autres opérations sans attendre la réponse du serveur !

Lorsque vous entrez le nom d'utilisateur et déplacez le curseur vers d'autres éléments du formulaire, le navigateur utilisera la technologie AJAX pour faire une requête au serveur. Le serveur demandera si l'utilisateur nommé Lemontree7777777 existe. renvoie true pour indiquer le nom. L'utilisateur lemontree7777777 existe déjà et le navigateur affiche "Le nom d'utilisateur a été enregistré après avoir obtenu le résultat !"

La page n'est pas actualisée pendant tout le processus, mais est partiellement actualisée

Après l'envoi de la requête, le navigateur peut effectuer d'autres opérations sans attendre le résultat de la réponse du serveur ;

Avantages et inconvénients d'AJAX

Avantages :

AJAX utilise la technologie JavaScript pour envoyer des requêtes asynchrones au serveur

Les requêtes AJAX ne nécessitent pas d'actualiser la page entière ;

Comme le contenu de la réponse du serveur n'est plus la page entière, mais une partie de la page, AJAX a des performances élevées

AJAX implémenté par jQuery

L'exemple le plus basique de jQuery envoyant une requête AJAX :

<!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")

Paramètres $.ajax

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)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!