jquery ajax 如何向jsp提交表单数据

前端技术 2023/09/03 JavaScript

AJAX越来越火了，作为一个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传过来的值。

本文地址：https://www.stayed.cn/item/8354

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案