ajax实现在html的table里面手动输入多个数据并传入servlet层
1. 针对的问题
前端页面为html页面,由于是静态页面,数据的传入传出都必须引入ajax来实现。这里主要实现<button></button>按键触发,调用servlet层的Java代码,完成html页面手动输入数据(输入较多数据)并传向后台。
2. 解决方法
(1) html页面(文件名index.html)
<table class="table table-bordered" style="margin-top: 10px; width: 99%;" id="pressureDeviceTable">
<thead>
<tr>
<th>板号</th>
<th>CH01</th>
<th>CH02</th>
<th>CH03</th>
<th>CH04</th>
<th>CH05</th>
<th>CH06</th>
<th>CH07</th>
<th>CH08</th>
<th>CH09</th>
<th>CH10</th>
<th>CH11</th>
<th>CH12</th>
<th>CH13</th>
<th>CH14</th>
<th>CH15</th>
<th>CH16</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button class="chose_cancle">取消</button>
<button class="chose_enter" type="button" id="fun" onclick="fun();" >保存</button>
<script type="text/javascript">
function fun(){
var PreList = [];
for(var i=0;i<1;i++){
for(var k=0;k<16;k++){
var text = document.getElementsByName("pDB"+(i+1)+"CH"+(k+1)+"")[0].value;
if(text!=false){
PreList = PreList.concat(text);
}
}
}
$.ajax({
url : "http://localhost:8080/tianjin-ssms-meach/Pre_devServlet?pDBCH="+PreList+"",
type : "post",
});
}
</script>静态页面的添加方法:在<button></button>中添加type属性为button,因其本身默认为submit属性;再添加onclick,后面为函数命名,再添加JS的function函数,实现想要实现的功能。再添加ajax,添加url地址,(本文件servlet层命名为Pre_devServlet.java)
注意:要想将前台获取到的数据传入servlet层,单纯的调用servlet文件是实现不了的,必须添加你获取到的值,我的数据组为PreList,因此表现出来为
url : "http://localhost:8080/xxx(工程文件名)/Pre_devServlet?pDBCH="+PreList+"",
3. servlet层接收数据
package com.bjut.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Pre_devServlet extends HttpServlet
{
/**
*
*/
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
//获取请求方法
this.doPost(request, response);
}
//doPost 客户端将数据传送至服务器
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
String name=null;
name = request.getParameter("pDBCH");
System.out.println(name);
}
}通过dopost实现:里面主要用到函数getParameter("html页面<input>中的name属性");
在web.xml中加入servlet作为路径指引
<servlet>
<servlet-name>Pre_devServlet</servlet-name>
<servlet-class>com.bjut.servlet.Pre_devServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Pre_devServlet</servlet-name>
<url-pattern>/Pre_devServlet</url-pattern>
</servlet-mapping>
4. 结果展示
前台界面输入:

后台servlet层接收:

相关推荐
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...