Maison > interface Web > js tutoriel > le corps du texte

jquery ajax comment soumettre les données du formulaire à jsp_jquery

WBOY
Libérer: 2016-05-16 15:43:28
original
2051 Les gens l'ont consulté

AJAX devient de plus en plus populaire. En tant que développeur de programmes WEB, si vous ne ressentez pas cela, vous prendrez du retard et pourriez même être éliminé à plusieurs reprises lorsque vous postulez à un emploi. Je suis également développeur de programmes WEB. Bien sûr, je dois "suivre le courant", sinon mon emploi ne sera pas garanti !

Auparavant, AJAX était implémenté à l'aide de scripts Javascript un par un, ce qui était très fastidieux. Après avoir appris Jquery, je pense que la mise en œuvre d'AJAX n'est pas si difficile. Bien sûr, en plus du framework Jquery, il existe d'autres excellents frameworks. Ici, je me concentrerai sur le plus populaire Jquery. Il existe deux façons de soumettre un formulaire dans Jquery AJAX, l'une consiste à soumettre des données via le paramètre url et l'autre consiste à soumettre le formulaire (comme d'habitude, la valeur du formulaire Form peut être obtenue en arrière-plan). Dans le formulaire à soumettre, s'il y a de nombreux éléments, il est recommandé de soumettre par la deuxième manière. Bien sûr, si vous souhaitez mettre en pratique vos « compétences en dactylographie », ce n'est pas une mauvaise idée de soumettre par la première manière. Je pense que les développeurs ne veulent pas gaspiller leurs efforts !

La technologie Ajax nous apporte une bonne expérience utilisateur. En même temps, l'utilisation de jquery peut simplifier le développement et améliorer l'efficacité du travail.

Ce qui suit est une introduction aux étapes générales de développement.

Cet article utilise l'outil de développement jquery-1.3.2.min.js.

Créez deux nouvelles pages :

1. show.jsp : Appelez ajax pour envoyer les données du formulaire à la page ajax.jsp.

2. ajax.jsp : récupère les données du formulaire transmises par la page show.jsp et renvoie les résultats.

Le format d'encodage des deux pages doit être défini sur GBK :

<%@ page contentType="text/html;charset=GBK"%>
Copier après la connexion

Partie clé de la page show.jsp :

1. Ajoutez une référence à jquery-1.3.2.min.js :

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Copier après la connexion

2. Définissez l'identifiant du formulaire, qui est utilisé lors de l'appel de la méthode ajax.

<form id="ajaxFrm" >
Copier après la connexion

3. Configurez un div pour afficher les résultats renvoyés par la page ajax.jsp

<div id="ajaxDiv"></div>
Copier après la connexion

4. Ajouter un bouton pour appeler ajax

<input type="button" onClick="doFind();" value="调用一下ajax" >
Copier après la connexion

5. Ajoutez une fonction pour appeler ajax :

function doFind(){

$.ajax({

cache: false,

type: "POST",

url:"ajax.jsp", //把表单数据发送到ajax.jsp

data:$('#ajaxFrm').serialize(), //要发送的是ajaxFrm表单中的数据

async: false,

error: function(request) {

alert("发送请求失败!");

},

success: function(data) {

$("#ajaxDiv").html(data); //将返回的结果显示到ajaxDiv中

}

});

}
Copier après la connexion

Code source de la page ajax.jsp :

<%@ page contentType="text/html;charset=GBK"%>

<%

String userName = request.getParameter("UserName");

if(userName!=null){

userName = new String(userName.getBytes("ISO-8859-1"), "utf-8");//解决乱码的问题

}

String returnString = "";

returnString="你好," + userName;

out.print(returnString);

%>
Copier après la connexion

L'effet de l'opération est le suivant :

jquery ajax comment soumettre les données du formulaire à jsp_jquery

jquery ajax comment soumettre les données du formulaire à jsp_jquery

Le formulaire de soumission jquery ajax transmet la valeur de l'action à jsp

page jsp :

Le code est le suivant :

var clientTel = $("#clientTel").val(); 
var activityId = $("#activityId").val(); 
$.ajax({ 
type : "post",//发送方式 
url : "/arweb/reserve/saveCode.action",// 路径 
data : "clientTel="+clientTel+"&activityId="+activityId , 
success: function(text){$("#randomCode").val(text);}, 
error: function(text) {alert("对不起,用户ID不存在,请输入正确的用户ID");} 
}); 
Copier après la connexion

cours d'action :

Le code est le suivant :

HttpServletResponse res = ServletActionContext.getResponse(); 
res.reset(); 
res.setContentType("text/html;charset=utf-8"); 
PrintWriter pw = res.getWriter(); 
pw.print(random); 
pw.flush(); 
pw.close(); 
Copier après la connexion

pw.print(random); Le caractère aléatoire ici est la valeur que l'action veut transmettre à jsp, success: function(text) le texte ici doit recevoir la valeur transmise par l'action.

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal