jquery ajax, wie man Formulardaten an jsp_jquery übermittelt

AJAX erfreut sich immer größerer Beliebtheit. Wenn Sie als WEB-Programmentwickler nicht so denken, geraten Sie ins Hintertreffen und werden bei Bewerbungen möglicherweise sogar wiederholt ausgeschlossen. Ich bin auch WEB-Programmentwickler und muss natürlich „mit dem Strom schwimmen“, sonst ist mein Job nicht garantiert!

Zuvor wurde AJAX mithilfe von Javascript-Skripten einzeln implementiert, was sehr umständlich war. Nachdem ich JQuery gelernt habe, habe ich das Gefühl, dass die Implementierung von AJAX nicht so schwierig ist. Natürlich gibt es neben dem JQuery-Framework auch andere hervorragende Frameworks. Hier werde ich mich auf das beliebtere JQuery konzentrieren. Es gibt zwei Möglichkeiten, ein Formular in Jquery AJAX zu senden: Eine besteht darin, Daten über URL-Parameter zu senden, und die andere darin, ein Formular zu senden (wie üblich kann der Wert des Formularformulars im Hintergrund abgerufen werden). Wenn das einzureichende Formular viele Elemente enthält, wird empfohlen, es auf die zweite Art und Weise einzureichen. Wenn Sie Ihre „Schreibfähigkeiten“ üben möchten, ist es natürlich keine schlechte Idee, es auf die erste Art einzureichen. Ich glaube, Entwickler wollen ihre Bemühungen nicht verschwenden!

Die Ajax-Technologie bietet uns eine gute Benutzererfahrung. Gleichzeitig kann die Verwendung von JQuery die Entwicklung vereinfachen und die Arbeitseffizienz verbessern.

Im Folgenden finden Sie eine Einführung in die allgemeinen Entwicklungsschritte.

In diesem Artikel wird das Entwicklungstool jquery-1.3.2.min.js verwendet.

Erstellen Sie zwei neue Seiten:

1. show.jsp: Rufen Sie Ajax auf, um die Daten im Formular an die Seite ajax.jsp zu senden.

2. ajax.jsp: Rufen Sie die von der show.jsp-Seite übergebenen Formulardaten ab und geben Sie die Ergebnisse zurück.

Das Kodierungsformat der beiden Seiten sollte auf GBK eingestellt sein:

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

Wichtiger Teil der show.jsp-Seite:

1. Fügen Sie einen Verweis auf jquery-1.3.2.min.js hinzu:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

2. Legen Sie die ID des Formulars fest, das beim Aufruf der Ajax-Methode verwendet wird.

<form id="ajaxFrm" >

3. Richten Sie ein Div ein, um die von der ajax.jsp-Seite zurückgegebenen Ergebnisse anzuzeigen

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

4. Fügen Sie eine Schaltfläche zum Aufrufen von Ajax hinzu

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

5. Fügen Sie eine Funktion zum Aufrufen von Ajax hinzu:

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中

}

});

}

Quellcode der ajax.jsp-Seite:

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

%>

Der Betriebseffekt ist wie folgt:

Jquery Ajax Submit Form übergibt Wert von Aktion an JSP

JSP-Seite:

Der Code lautet wie folgt:

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

Aktionsklasse:

Der Code lautet wie folgt:

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); Der Zufall ist hier der Wert, den die Aktion an jsp übergeben möchte. In jsp soll der Text hier den von der Aktion übergebenen Wert empfangen.