jquery ajax 如何向jsp提交表单数据
永远爱学习 人气:0AJAX越来越火了，作为一个WEB程序开发者要是不会这个感觉就要落伍，甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者，当然我也要 “随波逐流”一把，不然饭碗不保啊！
之前实现AJAX使用Javascript脚本一个一个敲出来的，很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了，当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquery AJAX提交表单有两种方式，一是url参数提交数据，二是form提交（和平常一样在后台可以获取到Form表单的值）。在所要提交的表单中，如果元素很多的话建议用第二种方式进行提交，当然你要是想练练“打字水平”的话用第一种方式提交也未尝不可，相信开发者都不想费白劲吧！
ajax技术带给我们的是良好的用户体验，同时，使用jquery可以简化开发，提高工作效率。
下面介绍一下大致的开发步骤。
本文使用的是 jquery-1.3.2.min.js开发工具。
新建两个页面:
1、show.jsp：调用ajax，将表单中的数据发送给ajax.jsp页面。
2、ajax.jsp：获取show.jsp页面传递的表单数据，并返回结果。
两个页面的编码格式要设置为GBK：
<%@ page contentType="text/html;charset=GBK"%>
show.jsp页面的重点部分：
1、添加对 jquery-1.3.2.min.js 的引用：
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
2、设置表单的id，在调用ajax的方法时要用到。
<form id="ajaxFrm" >
3、设置一个div，用于显示ajax.jsp页面返回的结果
<div id="ajaxDiv"></div>
4、增加一个按钮，用来调用ajax
<input type="button" onClick="doFind();" value="调用一下ajax" >
5、增加调用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中
}
});
}
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);
%>
运行效果如下：
jquery ajax提交表单从action传值到jsp
jsp页面：
代码如下:
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");}
});
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传过来的值。
加载全部内容