本文详解使用jQuery AJAX向JSP页面提交表单数据的两种核心方式：通过URL参数传递或通过Form序列化提交。文章以jquery-1.3.2为例，展示了show.jsp与ajax.jsp的完整交互流程，重点解析$.ajax配置、表单序列化技巧及后台中文乱码解决方案，帮助开发者高效实现异步表单提交。
jQuery AJAX提交表单概述
随着Web开发的演进，AJAX技术已成为前端开发者的必备技能。对于Web应用开发者而言，掌握这一技术不仅关乎技术视野的更新，更直接影响职业竞争力。为了适应行业需求，开发者必须跟进并熟练运用此类技术以确保持续的职业发展。
早期实现AJAX需手动编写大量JavaScript代码，过程繁琐且易错。引入jQuery框架后，AJAX的实现变得更为简洁高效。虽然存在其他优秀框架，但本文重点介绍应用广泛的jQuery。jQuery处理表单提交主要有两种模式：一是通过URL参数传递数据，二是直接序列化整个Form表单进行提交。当表单元素较多时，推荐采用第二种方式以简化代码；若仅为了演示或测试，使用第一种方式亦可，但通常开发者倾向于选择更高效的方案。
AJAX技术的核心价值在于提升用户体验，而结合jQuery框架可以显著简化开发流程，从而提高整体工作效率。
基于jQuery-1.3.2的开发步骤
接下来将介绍具体的开发实施步骤。
本文示例基于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页面实现细节
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);
%>实际运行效果如下图所示。
Action传值至JSP的进阶应用
此外，还可以探讨从Action传值到JSP的jQuery AJAX提交方式。
对应的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");}
}); 对应的Action类处理逻辑如下。
Action类的具体代码实现如下。
HttpServletResponse res = ServletActionContext.getResponse();
res.reset();
res.setContentType("text/html;charset=utf-8");
PrintWriter pw = res.getWriter();
pw.print(random);
pw.flush();
pw.close(); 在Action中，通过pw.print(random)将random变量输出到响应流。在JSP页面的success回调函数中，参数text即接收从Action传递过来的值，完成数据交互闭环。