Maison  >  Article  >  interface Web  >  Analyse pratique de l'application ajax

Analyse pratique de l'application ajax

php中世界最好的语言
php中世界最好的语言original
2018-04-04 13:46:171010parcourir

Cette fois je vais vous apporter une analyse pratique de l'application ajax. Quelles sont les précautions pour une application pratique ajax Voici des cas pratiques, jetons un oeil.

AJAX signifie « Asynchronous Javascript And XML », qui fait référence à 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 du script DOM sera utilisée pour le chargement)

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

•"jsonp" : format JSONP. Lors de l'appel d'une fonction à l'aide d'un formulaire JSONP, tel 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 Passez la variable de chaîne au frontend et renvoyez la variable de chaîne (format non-json) au. backend

Ici, afin de résoudre les caractères chinois tronqués qui apparaissent dans le transfert de données Ajax, avant le transfert de la chaîne, utilise la fonction javascript escape() pour encodez la chaîne de caractères chinois et retournez

est décodée à 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 d'arrière-plan résolvent le problème des

caractères chinois

caractères 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 . Front Desk Passez plusieurs tableaux unidimensionnels , et l'arrière-plan renverra des variables de chaîne (format non-json)

Au format non-json, l'arrière-plan peut ne renvoie que des chaînes si vous le souhaitez. Le tableau renvoyé en arrière-plan peut ê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 l'arrière-plan 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 unidimensionnel et un tableau bidimensionnel, et le backend renvoie. un tableau bidimensionnel (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);
}
});
});

Code PHP :

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);
Je crois que vous avez lu cet article. Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le contrôle Rating dans AjaxToolKit

Comment utiliser readyState et status dans Ajax

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn