【JavaScript】如何将JS中的数据提交到Servlet服务器中

功能

用户可以在form表单中输入用户名和密码
点击“改变用户名”、“改变密码”、“改变隐藏值”按钮后，相应input中的值被改变
注意：此处以一个隐藏值，为了证明隐藏值有效，可以点击“提交一下”按钮，将表单数据提交到服务器中。
从服务器中可以接收到隐藏值，说明隐藏值也有效。

输出

uname1=张三
upwd1=密码被改变了
hide1=我是隐藏值

思路

本来是要做一个博客查重，目标是：在前端点击“计算重复率ratio”之后，通过在JS使用Ajax将查重结果显示在页面上。

为了提高执行效率，避免提交之后后端再次计算ratio，我打算直接将之前计算过的ratio通过request请求提交到servlet中。

简单来说，这是一个怎么将JS中的数据临时存储，在提交表单的时候提交到Servlet的问题。

一开始在想，怎样通过js把值保存到pageContext作用域当中，没有查到相关资料。最后的解决方式是：使用表单中隐藏的input元素，达到临时存储的目的。具体步骤是：

在最后要提交的表单中添加一个隐藏的input元素
在按钮点击事件中设置一个JS函数，此JS函数将值放进隐藏的input元素中
这样，在提交表单时，隐藏的值也能被顺带提交到服务器上

前端JSP页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用js改变表单内容的测试</title>
</head>
<body><form name="input" action="TestServlet" method="post">用户名： <input type="text" id="uname" name="uname"> <br><br>密码：  <input type="text" id="upwd" name="upwd"> <br><br>隐藏值： <input type="hidden" id="hide" name="hide"> <br><br>提交按钮：<input type="submit" value="提交一下"> <br><br></form><hr><p>点击下面的按钮，将调用setValueTest()函数，可以在javascript中改变form表单中的值<p><input type="button" value="改变用户名 " onclick="changeUname()" /><input type="button" value="改变密码 " onclick="changeUpwd()" /><input type="button" value="改变隐藏值 " onclick="changeHide()" /><script type="text/javascript">function changeUname() {document.getElementById("uname").value = "用户名被改变了";}function changeUpwd() {document.getElementById("upwd").value = "密码被改变了";}function changeHide() {document.getElementById("hide").value = "我是隐藏值";}</script></body>
</html>

后端Servlet

package servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("--------------------------");req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");String uname1 = (String) req.getParameter("uname");String upwd1 = (String) req.getParameter("upwd");String hide1 = (String) req.getParameter("hide");System.out.println("uname1=" + uname1);System.out.println("upwd1=" + upwd1);System.out.println("hide1=" + hide1);}
}

【JavaScript】如何将JS中的数据提交到Servlet服务器中相关推荐

将json数据写入html表单,将json数据提交到html表中
我需要基于json响应构建一个表,调用API时调用API, 调用API并让JSON工作正常,但我没有发现任何有关构建表的文档并从x.js传递给x.html.我成功地从json传递了1个参数/值.将js ...
word录入表单数据 java 导入系统,java导入excel | 怎么把excel中的数据批量导入到word中的表格中...
用javascript怎么实现把excel中的数据批量导入到数据库表中这个js不能直接实现吧我们程序用到先读取excel内容转换成数组然后放到页面上再提交表单储存 MySql如何批量添加数 ...
取出json中的数据php,怎么从Json中取出数据放到一个新组中
如何从Json中取出数据放到一个新组中 JSON数据如下: { "CommunityModel": [ { " UUID ": "xxxxxx-xxx ...
spark抽取mysql数据到hive_使用spark将内存中的数据写入到hive表中
使用spark将内存中的数据写入到hive表中 hive-site.xml hive.metastore.uris thrift://master:9083 Thrift URI for the re ...
html将excel数据自动导入到网页,如何把excel表中的数据自动输入到网页中
怎么把excel表中的数据自动输入到网页中因要给员工网上投工伤保险,员工资料在excel表中,现在在网上投保险时只能一笔笔的复杂粘贴到网页中,有没有办法能直接把excel表中的资料自动输入到网页中的 ...
hive sqoop 分区导入_利用oozie，执行sqoop action将DB2中的数据导入到hive分区表中
测试:利用oozie,执行sqoop action将DB2中的数据导入到hive分区表中. 需要注意的地方: 1,要添加hive.metastore.uris这个参数.否则无法将数据加载到hive表中 ...
load函数matlab,『matlab load函数的用法』如何把matlab中的数据导到excel表格中
如何把matlab中的数据导到excel表格中 xlswrite('E:系数.xls',B,'','A2') E:系数.xls 是路径 B是需要导入的矩阵 A2是指矩阵从表格中的A2开始输入希望可以 ...
cpp导入excel到mysql_将EXCEL表格中的数据导入mysql数据库表中
本文转载自http://blog.sina.com.cn/s/blog_5d972ae00100gjij.html 今天项目上遇到需要将excel中的数据导入到数据库的classify表中,于是乎拼命 ...
matlab将数据输出到excel中,matlab数据输出为excel表格-如何把matlab中的数据导到excel表格中...
如何将matlab工作空间的数据导出到excel 1.很简单的用xlswrite函数就可以了.首先打开matlab,输入你的代码 2.找到你要存放文件的位置复制绝对路径(致谢文件名的话就会存放在当前目 ...

【JavaScript】如何将JS中的数据提交到Servlet服务器中

功能

输出

思路

前端JSP页面

后端Servlet

【JavaScript】如何将JS中的数据提交到Servlet服务器中相关推荐

最新文章

热门文章