Exemple détaillé de soumission de formulaire Ajax (avec code)

Cette fois, je vais vous apporter un exemple détaillé de soumission de formulaire Ajax (avec code). Quelles sont les précautions pour la soumission de formulaire Ajax Ce qui suit est un cas pratique, prenons un. regarder.

ajax (développement ajax)

AJAX est "Asynchrone Javascript Et XML" (Javascript et XML asynchrones), 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.

J'apprends le code depuis longtemps, mais j'utilise rarement ajax. Plus tard, je suis allé en savoir plus à ce sujet. Voici mon opinion et ma compréhension d'ajax en tant que nouveau venu dans ajax. .

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

J'ai récemment testé la soumission de formulaire ajax. Il existe deux types de soumission de formulaire : post et get La méthode post est plus utilisée Bien que comparée à POST, GET est plus simple et plus rapide, et dans la plupart des cas, elle fonctionne. .

Cependant, l'utilisation des requêtes POST est plus efficace dans les situations suivantes :

1 Impossible d'utiliser les fichiers en cache (mise à jour de fichiers ou de bases de données sur le serveur)

2 .Envoyer de grandes quantités de données au serveur (POST n'a pas de limite de données)

3 Lors de l'envoi d'entrées utilisateur contenant des caractères inconnus, POST est plus stable et fiable que GET

. La méthode $get soumet le formulaire

La méthode get() charge les informations via une requête HTTP GET à distance

Format

$(selector).get(url,data,success(response,status,xhr),dataType)

Par exemple :

Demandez la page web demo.php, envoyez 2 paramètres, ignorez la valeur de retour :

$.get("demo.php", { name: "John", time: "2pm" } );

demo.php est l'adresse URL pour envoyer la requête

{ nom : « John », heure : « 14h » } Les données à envoyer au serveur.

Méthode $POST pour soumettre le formulaire

$.post

jQuery.post( url, [data], [callback] , [type] ) : Utiliser la méthode POST Pour faire une requête asynchrone

Paramètres :

url (String) : adresse URL pour envoyer la requête

données (Carte) : (Facultatif) Données à envoyer au serveur, exprimées sous forme de couples clé/valeur.

callback (Fonction) : (facultatif) Fonction de rappel lorsque le chargement est réussi (cette méthode est appelée uniquement lorsque l'état de retour de Response est réussi).

Par exemple, lors de l'inscription, l'utilisation du Code de vérification

<script type="text/javascript">
function redirect(url) {
location.href = url;
}
$("#code_btn").click(function(){
var tel = $("#username").val();
if(tel == ""){
alert("请输入正确的手机号码作为账号进行注册");
$("#username").focus();
return false;
}
if(!(/^1[3|4|5|8|7][0-9]\d{4,8}$/.test(tel))){
alert("请使用正确的手机号码作为账号进行注册！");
$("#username").focus();
return false;
};
var codeNum = $("#code").val();
$.post( '{APP_PATH}index.php?m=member&c=index&a=public_send_message', {tel:tel,codeNum:codeNum}, function(result){
// console.log(result);
})
timep(60);
});
function timep(j){
$("#code_btn").attr('disabled',"true");
$("#code_btn").val(j+"秒");
time=setInterval(function(){
j=j-1;
$("#code_btn").val(j+"秒");
if(j==0){
$("#code_btn").removeAttr('disabled');
clearInterval(time);
j=60;
$("#code_btn").val("点击获取验证码");
}
},1000);
}
</script>

APP_PATH}index.php?m=member&c=index&a=public_send_message est l'adresse URL à envoyer la requête

{tel:tel,codeNum:codeNum} sont les données à envoyer au serveur, exprimées sous forme de paires clé/valeur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ajax pour obtenir les données API des prévisions météorologiques nationales

Stockage interactif des données Ajax et JSON

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!