當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
【JavaScript】如何将JS中的数据提交到Servlet服务器中
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】如何将JS中的数据提交到Servlet服务器中
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
功能
- 用戶(hù)可以在form表單中輸入用戶(hù)名和密碼
- 點(diǎn)擊“改變用戶(hù)名”、“改變密碼”、“改變隱藏值”按鈕后，相應(yīng)input中的值被改變
- 注意：此處以一個(gè)隱藏值，為了證明隱藏值有效，可以點(diǎn)擊“提交一下”按鈕，將表單數(shù)據(jù)提交到服務(wù)器中。
- 從服務(wù)器中可以接收到隱藏值，說(shuō)明隱藏值也有效。
輸出
uname1=張三 upwd1=密碼被改變了 hide1=我是隱藏值思路
本來(lái)是要做一個(gè)博客查重，目標(biāo)是：在前端點(diǎn)擊“計(jì)算重復(fù)率ratio”之后，通過(guò)在JS使用Ajax將查重結(jié)果顯示在頁(yè)面上。
為了提高執(zhí)行效率，避免提交之后后端再次計(jì)算ratio，我打算直接將之前計(jì)算過(guò)的ratio通過(guò)request請(qǐng)求提交到servlet中。
簡(jiǎn)單來(lái)說(shuō)，這是一個(gè)怎么將JS中的數(shù)據(jù)臨時(shí)存儲(chǔ)，在提交表單的時(shí)候提交到Servlet的問(wèn)題。
一開(kāi)始在想，怎樣通過(guò)js把值保存到pageContext作用域當(dāng)中，沒(méi)有查到相關(guān)資料。最后的解決方式是：使用表單中隱藏的input元素，達(dá)到臨時(shí)存儲(chǔ)的目的。具體步驟是：
- 在最后要提交的表單中添加一個(gè)隱藏的input元素
- 在按鈕點(diǎn)擊事件中設(shè)置一個(gè)JS函數(shù)，此JS函數(shù)將值放進(jìn)隱藏的input元素中
- 這樣，在提交表單時(shí)，隱藏的值也能被順帶提交到服務(wù)器上
前端JSP頁(yè)面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用js改變表單內(nèi)容的測(cè)試</title> </head> <body><form name="input" action="TestServlet" method="post">用戶(hù)名： <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>點(diǎn)擊下面的按鈕，將調(diào)用setValueTest()函數(shù)，可以在javascript中改變form表單中的值<p><input type="button" value="改變用戶(hù)名 " onclick="changeUname()" /><input type="button" value="改變密碼 " onclick="changeUpwd()" /><input type="button" value="改變隱藏值 " onclick="changeHide()" /><script type="text/javascript">function changeUname() {document.getElementById("uname").value = "用戶(hù)名被改變了";}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);} }總結(jié)
以上是生活随笔為你收集整理的【JavaScript】如何将JS中的数据提交到Servlet服务器中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【JSP/Servlet】getPara
- 下一篇： 【Servlet】总结 JSP的四大域对