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

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"%>

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>

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

<form id="ajaxFrm" >

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

<div id="ajaxDiv"></div>

4. Ajouter un bouton pour appeler ajax

<input type="button" onClick="doFind();" value="调用一下ajax" >

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中

}

});

}

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);

%>

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

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");} 
}); 

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(); 

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.