快捷導(dǎo)航

jquery ajax 如何向jsp提交表單數(shù)據(jù)

更新時(shí)間：2015年08月23日 10:08:09 作者：永遠(yuǎn)愛學(xué)習(xí)

ajax技術(shù)在做表單數(shù)據(jù)傳值非常棒，給用戶帶來很好的用戶體驗(yàn)度，同時(shí)，使用jquery可以簡化開發(fā)，提高效率。下面給大家介紹jquery ajax 如何向jsp提交表單數(shù)據(jù)，需要的朋友可以參考下

AJAX越來越火了，作為一個(gè)WEB程序開發(fā)者要是不會這個(gè)感覺就要落伍，甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開發(fā)者，當(dāng)然我也要 “隨波逐流”一把，不然飯碗不保啊！

之前實(shí)現(xiàn)AJAX使用Javascript腳本一個(gè)一個(gè)敲出來的，很繁瑣。學(xué)習(xí)Jquery之后就感覺實(shí)現(xiàn)AJAX并不是那么的困難了，當(dāng)然除了 Jquery框架外還有其它的優(yōu)秀框架這里我就著重說下比較流行的Jquery。Jquery AJAX提交表單有兩種方式，一是url參數(shù)提交數(shù)據(jù)，二是form提交（和平常一樣在后臺可以獲取到Form表單的值）。在所要提交的表單中，如果元素很多的話建議用第二種方式進(jìn)行提交，當(dāng)然你要是想練練“打字水平”的話用第一種方式提交也未嘗不可，相信開發(fā)者都不想費(fèi)白勁吧！

ajax技術(shù)帶給我們的是良好的用戶體驗(yàn)，同時(shí)，使用jquery可以簡化開發(fā)，提高工作效率。

下面介紹一下大致的開發(fā)步驟。

本文使用的是 jquery-1.3.2.min.js開發(fā)工具。

新建兩個(gè)頁面:

1、show.jsp：調(diào)用ajax，將表單中的數(shù)據(jù)發(fā)送給ajax.jsp頁面。

2、ajax.jsp：獲取show.jsp頁面?zhèn)鬟f的表單數(shù)據(jù)，并返回結(jié)果。

兩個(gè)頁面的編碼格式要設(shè)置為GBK：

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

show.jsp頁面的重點(diǎn)部分：

1、添加對 jquery-1.3.2.min.js 的引用：

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

2、設(shè)置表單的id，在調(diào)用ajax的方法時(shí)要用到。

<form id="ajaxFrm" >

3、設(shè)置一個(gè)div，用于顯示ajax.jsp頁面返回的結(jié)果

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

4、增加一個(gè)按鈕，用來調(diào)用ajax

<input type="button" onClick="doFind();" value="調(diào)用一下ajax" >

5、增加調(diào)用ajax的函數(shù)：

function doFind(){

$.ajax({

cache: false,

type: "POST",

url:"ajax.jsp", //把表單數(shù)據(jù)發(fā)送到ajax.jsp

data:$('#ajaxFrm').serialize(), //要發(fā)送的是ajaxFrm表單中的數(shù)據(jù)

async: false,

error: function(request) {

alert("發(fā)送請求失敗！");

},

success: function(data) {

$("#ajaxDiv").html(data); //將返回的結(jié)果顯示到ajaxDiv中

}

});

}

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

%>

運(yùn)行效果如下：

Jquery技巧：使用ajax技術(shù)提交表單數(shù)據(jù)

jquery ajax提交表單從action傳值到j(luò)sp

jsp頁面：

代碼如下:

var clientTel = $("#clientTel").val(); 
var activityId = $("#activityId").val(); 
$.ajax({ 
type : "post",//發(fā)送方式 
url : "/arweb/reserve/saveCode.action",// 路徑 
data : "clientTel="+clientTel+"&activityId="+activityId , 
success: function(text){$("#randomCode").val(text);}, 
error: function(text) {alert("對不起,用戶ID不存在,請輸入正確的用戶ID");} 
});

acion類：

代碼如下:

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);這里的random就是action要向jsp傳的值，在jsp中，success: function(text)這里的text就是接收從action傳過來的值。

您可能感興趣的文章: