页面之间参数传递3.1--Struts标签，Ajax

最新推荐文章于 2021-02-19 17:00:23 发布

罗小树

最新推荐文章于 2021-02-19 17:00:23 发布

阅读量286

点赞数 2

分类专栏： JavaWeb开发页面传参文章标签： web 页面传参 Struts框架 Ajax Jquery

本文链接：https://blog.csdn.net/u010999809/article/details/76302204

版权

JavaWeb开发同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

页面传参

3 篇文章 0 订阅

订阅专栏

接着页面之间参数传递--Struts标签，继续。这次再与Ajax进行结合

参数获取流程：

1.点击a.jsp中的超链接

（1）a标签提交一个参数（id）

（2）第一个form表单提交3个参数（id,name,age）

（3）第一个form表单提交3个参数（id,name,age）

均通过ajax提交到studentInfo.action

2.服务器生成数据：studentInfo.action获取参数并转发至b.jsp（会产生3次响应的jsp）

3.a.jsp获取ajax从服务器取回数据（3次响应的jsp），并显示在本页的div（专门用来存放ajax的返回数据的）中

实现流程：

1.首先在项目中添加jquery，

2.在前一个实例（页面之间参数传递--Struts标签）的基础上，只需要改动a.jsp代码即可

改动一：添加jquery支持

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

改动二：在body部分给a标签和两个form表单添加id，添加一个存放ajax响应数据的div

<body>
	<a id="a1" href="#">点击我提交参数id</a>
	<form id="form1" action="student/studentInfo.action" method="get">
		编号：<input type="text" name="id" value="1"/><br/>
		姓名<input type="text" name="name" value="张三"/><br/>
		年龄：<input type="text" name="age" value="100"/><br/>
		<input type="submit" value="get方式提交参数"/>
	</form><br/>
	
	<form id="form2" action="student/studentInfo.action" method="post">
		编号：<input type="text" name="id" value="2"/><br/>
		姓名<input type="text" name="name" value="李四"/><br/>
		年龄：<input type="text" name="age" value="200"/><br/>
		<input type="submit" value="post方式提交参数"/>
	</form>
	<div id="databody"></div>
</body>

改动三：添加ajax提交参数，获取响应的代码

<script type="text/javascript">
	$(function(){
		$("#a1").click(function(){
			$("#databody").empty();
			$("#databody").load("student/studentInfo.action?id=100",
				function(){
					alert("超链接获取的数据加载完毕！");
				}
			);
			
			var id1 = $("#form1 input[name='id']").val();
			var name1 = $("#form1 input[name='name']").val();
			var age1 = $("#form1 input[name='age']").val();
			$.get("student/studentInfo.action",
				{
					id : id1,
					name : name1,
					age : age1
				},
				function(responseText){
					alert("即将加载get请求到的jsp...");
					$("#databody").append(responseText);
			});
			
			var id2 = $("#form2 input[name='id']").val();
			var name2 = $("#form2 input[name='name']").val();
			var age2 = $("#form2 input[name='age']").val();
			$.get("student/studentInfo.action",
				{
					id : id2,
					name : name2,
					age : age2
				},
				function(responseText){
					alert("即将加载post请求到的jsp...");
					$("#databody").append(responseText);
			});
		});
	})
</script>

3.测试

在tomcat（端口号：8080）上部署该项目（项目名为：Struts04）

浏览器输入http://localhost:8080/Struts04/a.jsp

点击超链接后，最终显示结果，

罗小树

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面之间参数传递3.1--Struts标签，Ajax

接着页面之间参数传递--Struts标签，继续。这次再与Ajax进行结合参数获取流程：1.点击a.jsp中的超链接（1）a标签提交一个参数（id）（2）第一个form表单提交3个参数（id,name,age）（3）第一个form表单提交3个参数（id,name,age）均通过ajax提交到studentInfo.action2.服务器生成数据：studentInfo.a
复制链接

扫一扫