`
seya
  • 浏览: 356845 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Javascript与JSP的数据交互

    博客分类:
  • J2EE
阅读更多

实现JSP数据和JavaScript数据交互使用

 

对于WEB程序来说,前端(JavaScript)和后端(JSP/Servlet)是没法共用数据的,只能是后端程序(JSP)把数据输出,生成页面到前端,这时候生成的页面中的JavaScript代码才有可能得到所谓jsp的数据。同样的,只有把JavaScript里的数据提交给后端JSP代码,JSP程序中才能得到JavaScript的数据。

那如何实现在页面的JavaScript中使用jsp中的数据或是在JSP中使用页面的JavaScript数据呢?

一、页面中的JavaScript的数据如何提交给后台的JSP程序

① 可以将JavaScript的数据以xxx.JSP?var1=aaa&var2=bbb的形式作为URL的参数传给JSP程序,此时在jsp中用

 

<%String strVar1=request.getParameter("var1");%>

就可以获取到JavaScript脚本传递过来的数据;

② 使用JavaScript通过在表单里加入隐藏域信息,然后用表单提交的方式把数据传递给JSP程序。

参考下面的脚本:

 

<script language="JavaScript"> 
<!-- 
/*************************************************************** 
* JavaScript脚本,放置在页面中的任何位置都可以 
* insertclick()函数获取JSP传递到页面中的变量varMC, 
* 然后就可以在JavaScript中修改这个变量的值,再通过 
* post的方式提交给JSP程序来使用。 
***************************************************************/ 
function insertclick(){ 
var1 = document.all.mc.value; //获取页面form中的变量值 
var1 = var1 + "名称"; 
document.insertForm.submit(); 
} 
//--> 
</script> 

<!-- html页面form表单,放置在html页面中的位置不限 --> 
<form name="insertForm" method="post" action="yourJSP"> 
<!-- 下面这一句是获取JSP程序中传递过来的变量值 --> 
<input type="hidden" name="mc" value="<%=varMC%>"> 
<input type="button" value="提交" onclick="insertclick()"> 
</form>

二、页面中的JavaScript的数据如何使用后台的JSP程序的数据

这个比较简单,直接在JavaScript脚本中用<!---->就可以把jsp程序中的数据传递给JavaScript脚本使用了。

 

参考下面的脚本:

 

<!-- html页面form表单,放置在html页面中的位置不限 --> 
<form name="insertForm" method="post" action="yourJSP"> 
<input type="hidden" name="mc" value=""> 
</form> 

<script language="JavaScript"> 
<!-- 
/*************************************************************** 
* JavaScript脚本,放置在页面中form以后的任何位置都可以 
* 使用JavaScirpt获取JSP传递到页面中的变量varMC, 
* 然后就可以在JavaScript中使用这个变量的值,通过 
* JavaScript脚本赋值给form中的隐藏域。 
***************************************************************/ 
var1 = "<%=varMC%>"; //获取JSP中的变量值 
document.all.mc.value = var1; 
//--> 
</script>
分享到:
评论

相关推荐

    JSP与JS交互问题 值传递

    本文将讨论JSP与JS交互问题的值传递,包括在JSP中访问JS返回的值、JS获得JSP数据的方法及解决方案。 一、在JSP中访问JS返回的值 在JSP中,我们可以使用JavaScript来获取用户输入的值,但是在JSP中如何获取这些值呢...

    jsp结合js实现三级菜单联动.pdf

    jsp技术的主要特点是可以与HTML、CSS、JavaScript等技术集成,可以生成动态的Web页面,并且可以与JavaBean、数据库集成,实现数据的交互操作。 在本例中,我们使用jsp技术与JavaScript技术实现三级菜单联动的下拉...

    梁建武<JSP程序设计实用教程>之第三章 JavaScript和Java语言

    为什么学习JSP之前必须掌握JavaScript和Java语言...还能通过采用事件驱动机制,使其能在客户端(浏览器)与用户实现大量的交互,还能创建出惊人的特效。本章先介绍JavaScript的基本语法,然后介绍Java语言的具体特性。

    jsp一个个人博客的设计与实现

    jsp个人博客设计与实现 本文将详细介绍如何使用jsp设计和实现一个个人博客的网站,涵盖系统设计、功能需求、性能需求、系统架构、业务流程等多个方面的知识点。 系统设计 在设计个人博客网站时,需要考虑到系统的...

    JSP中java代码与js之间的传值

    NULL 博文链接:https://wuaner.iteye.com/blog/455481

    jsp文本文档

    * 灵活性强:jsp语言可以与HTML、JavaScript、CSS等语言集成,实现网页的动态化和交互性。 * 广泛应用:jsp语言可以应用于Web开发、移动应用开发、企业信息系统等领域。 jsp文档的组成部分包括: * 指令 directive...

    基于SSM框架和Bootstrap的图书管理系统CRUD源码,支持数据校验与Ajax交互

    项目概述:本项目是一个基于SSM(Spring、SpringMVC、MyBatis)框架和Bootstrap的图书管理系统,实现了CRUD(创建、读取、更新、删除)功能,并提供数据校验机制及Ajax交互支持。主要开发语言为Java,辅以CSS和...

    JavaScript完全自学宝典 源代码

    示例描述:介绍JavaScript与各种浏览器插件的交互方法。 15.1.html 使用JavaScript操作Java Applet。 15.2.html 在Java Applet中调用JavaScript。 15.3.svg 基本SVG文件。 15.4.svg 使用JavaScript...

    jsp统计图(xml解析数据)

    习惯了使用Office Web Component(OWC),Report Viewer控件,以及GDI+进行绘制图标,下面介绍下可以生成图表更生动的FusionCharts Free画图,它可以更简洁地与用户进行交互,更重要的是,这基本上是一个完全免费的...

    基于JSP技术的Web应用程序开发的安全策略_赵锋

    JSP技术提供了多种加密和解密机制,如使用SSL/TLS协议对数据进行加密、使用JavaScript对数据进行加密等。 基于JSP技术的Web应用程序开发需要关注安全性问题,使用合适的安全机制和策略来确保数据的安全性和可靠性。

    基于JAVA JSP网上书店系统的毕业设计,JSP和Servlet技术,前端HTML、CSS和JavaScript,MySQL

    一个基于JAVA JSP技术的网上书店系统的毕业设计。该系统可以帮助用户方便地浏览和购买书籍...1. 前端设计:使用HTML、CSS和JavaScript编写网页前端,通过JSP技术将前端页面和后台数据进行交互。 2. 数据库设计:设计数

    Android中Java和JavaScript交互实例

    主要介绍了Android中Java和JavaScript交互实例,本文给出了实现方法、实现代码、js调用Java、java调用js等内容,需要的朋友可以参考下

    【JavaScript】基于JSP的酒店客房管理系统源【源码+lw+部署文档+讲解】

    内容概要:这个计算机毕业设计项目是基于JSP(JavaScript)的酒店客房管理系统的设计与实现,旨在帮助学生通过实践掌握JSP技术和数据库应用,并了解酒店客房管理系统的开发流程和技术选型。该系统旨在提供一个完整的...

    jsp网络编程从基础到实践

    实例2 HTML与JavaScript交互示例 第4章 JSP语法 实例3 JSP程序的基本结构 实例4 简单数据类型综合应用实例 实例5 包装类综合应用实例 实例6 数组应用实例 实例7 字符截取程序示例 实例8 查找字符串程序示例 ...

    JSP网络编程从基础到实践的实例代码

    实例2 HTML与JavaScript交互示例 第4章 JSP语法 实例3 JSP程序的基本结构 实例4 简单数据类型综合应用实例 实例5 包装类综合应用实例 实例6 数组应用实例 实例7 字符截取程序示例 实例8 查找字符串程序示例 ...

    基于layui+jsp+servlet的宾馆管理系统源码+数据库+项目说明(含设计报告).zip

    数据传输交互采用servlet、ajax、json。前端UI采用layui框架,套用layuimini模板,使用基于jquery及javascript的jsp页面实现。使用IDEA作为开发工具,并将网页部署在tomcat上运行。 mysql数据库用户名:root ...

    JSP网络编程从基础到实践

    《JSP网络编程从基础到实践》 实例1 第一个JSP页面 Web开发基础 实例2 HTML与JavaScript交互示例 JSP语法 实例3 JSP程序的基本结构 实例4 简单数据类型综合应用实例 实例5 包装类综合应用...

    JSP教师档案管理系统(源代码+论文).rar

    在技术实现上,JSP教师档案管理系统利用JSP与Servlet相结合的方式,前端页面使用HTML、CSS和JavaScript构建,后端则由Java Beans处理数据逻辑。数据库方面,系统可能采用了MySQL或其他关系型数据库来存储和管理数据...

    用ajax实现的jsp二级联动下拉列表

    用ajax实现的jsp二级联动下拉列表,使用异步交互的二级联动堪称jsp革命性变动。以前的联动大都是把所有的数据取出来放在javascript中,就一个字------烦

Global site tag (gtag.js) - Google Analytics