Analyse complète des applications complètes Ajax

AJAX = JavaScript et XML asynchrones, AJAX est une technologie permettant de créer des pages Web rapides et dynamiques. Cet article vous apporte une analyse complète de l'application complète d'Ajax. Il est très bon et a une valeur de référence. Les amis intéressés devraient y jeter un œil ensemble

AJAX est "Asynchronous Javascript And XML" (asynchrone). JavaScript et XML). Désigne une technologie de développement Web permettant de créer des applications Web interactives.

AJAX = JavaScript asynchrone et XML (un sous-ensemble du langage de balisage universel standard).

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Les pages Web traditionnelles (n'utilisant pas AJAX) doivent recharger la page Web entière si le contenu doit être mis à jour.

•"xml" : renvoie un document XML pouvant être traité avec jQuery.

•"html" : renvoie les informations HTML en texte brut ; la balise de script incluse sera exécutée une fois insérée dans le dom.

•"script" : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache. Sauf si le paramètre "cache" est défini. Remarque : lors de requêtes distantes (pas sous le même domaine), toutes les requêtes POST seront converties en requêtes GET. (Car la balise de script DOM sera utilisée pour le chargement)

•"json" : renvoie les données JSON.

•"jsonp" : format JSONP. Lors de l'appel d'une fonction au format JSONP, telle que "myurl?callback=?", jQuery remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel.

•"text" : renvoie une chaîne de texte brut

1. Transmettez les variables de chaîne au frontend et renvoyez les variables de chaîne au backend (non-json format)

Ici, afin de résoudre les caractères chinois tronqués qui apparaissent dans le transfert de données Ajax, la chaîne de caractères chinois est codée à l'aide de la fonction javascript escape() avant la chaîne est transféré et le retour

est décodé à l'aide de la fonction unescape() afin que les caractères chinois puissent être affichés normalement. Bien entendu, le code PHP d’arrière-plan ajoute également des fichiers d’en-tête pour garantir que les chaînes de caractères chinois ne seront pas tronquées. Divers codes backend résolvent le problème des

caractères chinois tronqués comme suit :

PHP :

header('Content-Type:text/html;charset=GB2312');

Code Javascript :

$(function(){
var my_data="前台变量";
my_data=escape(my_data)+"";//编码，防止汉字乱码
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(unescape(data));//解码，显示汉字
}
});
});

Code PHP :

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码，使中文不会变成乱码
$backValue=$_POST['trans_data'];
echo $backValue."+后台返回";

2. Le frontend transmet plusieurs tableaux unidimensionnels et l'arrière-plan renvoie des variables de chaîne (format non-json)

Au format non-json, l'arrière-plan ne peut renvoyer que des chaînes. Si vous souhaitez revenir en arrière-plan, les tableaux peuvent être au format json, qui sera présenté en détail plus loin dans cet article.

Code Javascript :

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(data);
}
});
});

Code PHP :

//读取第一个数组
$backValue="trans_data:";
$trans=$_POST['trans_data'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
//读取第二个数组
$backValue=$backValue." , trans_data1:";
$trans=$_POST['trans_data1'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
echo $backValue;

3. Le frontend transmet plusieurs tableaux unidimensionnels et le backend renvoie un tableau bidimensionnel (format json)

Code Javascript :

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

Code PHP :

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码，使中文不会变成乱码
$backValue=array();
$backValue[0]=$_POST['trans_data'];
$backValue[1]=$_POST['trans_data1'];
echo json_encode($backValue);

4. Le frontend transmet un tableau à une dimension et un tableau à deux dimensions, et le backend renvoie un tableau à deux dimensions. (format json)

Code Javascript :

$(function(){
var my_data=new Array();
var my_data1=new Array();
var my_data2=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
my_data2[0]=my_data;
my_data2[1]=my_data1;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

PHP code :

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码，使中文不会变成乱码
$backValue=array();
$backValue=$_POST['trans_data2'];
$backValue[2]=$_POST['trans_data'];
$backValue[3]=$_POST['trans_data1'];
echo json_encode($backValue);

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser le proxy inverse Nginx pour éviter les requêtes inter-domaines ajax

Analyse approfondie de Nginx Implémentation des problèmes de requêtes inter-domaines AJAX

Analyse complète des paramètres de la méthode $.Ajax() (tutoriel graphique)

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!