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

来源:互联网 发布:知乎 最尴尬的吹牛 编辑:程序博客网 时间:2024/05/17 19:58

接着页面之间参数传递--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


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