js和jsp能一起用吗（在js中可以引用jsp中的数据吗）

本文目录

• 在js中可以引用jsp中的数据吗
• JSP和JSF合并打造完美Web应用
• jsp中可以写入javascript么
• 如何在jsp中插入javascript
• Jsp和javascript能嵌套使用吗
• jsp与js结合的用法
• js调用jsp的问题
• 能不能在javascript中嵌入jsp代码

在js中可以引用jsp中的数据吗

你好，

通常来说是可以的。我给你列举两种方法，你根据你的情况选择适合你的吧。

方法一：将jsp中的变量输出到html中的type为hidden的input中，js从input中去取值

《!-- jsp页面中的input元素 --》
《input type="hidden" value="《%=serverData%》" id="J_ServerData"》
《!--
当然，挂在某一个DOM元素的属性上也是可以的
《div id="J_DataDiv" data-server-data="《%=serverData%》"》页面中的任意DOM节点《/div》
--》
《script》
// JS中读取jsp页面中输出到页面中的值
var inp = document.getElementById(’J_ServerData’);
// 如果是div
// var node = document.getElementById(’J_DataDiv’);
// 取值
var serverData = inp.value;
// 如果是属性
// var serverData = node.getAttribute(’data-server-data’);
c***ole.log(serverData);
《/script》

方法二：JS可以通过AJAX与服务端通信，只需服务端封装一个JSP接口，前端即可取到服务端数据，以jQuery为例

$.ajax({
    url: ’server_addr/api.jsp’,
    type: ’get’,
    success: function(data) {
        // data 就是服务端（jsp）返回的数据
        c***ole.log(data);
    }
});

大致就这么多，希望能解决你的疑惑，如有疑问可追问~

JSP和JSF合并打造完美Web应用

　　Java在最近几年逐渐升温 随着Java SE 和Java SE 的推出 Java的未来更显得无比辉煌 但以Java为基础的JSP在Java SE 推出之前却一直抬不起头来 这最重要的原因就是JSP虽然功能十分强大 但最大的优点也是它的最大缺点 功能强大就意味着复杂 尤其是设计前端界面的可视化工具不多 也不够强大 因此 设计JSP页面就变得十分复杂和繁琐 不过 在Java SE 推出的同时 Sun为了简化JSP的开发难度 推出了新的JavaServer Faces(简称JSF)规范 从而使JSP走上了康庄大道

　　一 什么是JSF

　　JSF和JSP是一对新的搭档 JSP是用于后台的逻辑处理的技术 而JSF恰恰相反 是使开发人员能够快速的开发基于 Java 的 Web 应用程序的技术 是一种表现层技术 目前 JSF 已经正式作为一个标准加入了Java EE 中

　　作为一种高度组件化的技术 开发人员可以在一些开发工具的支持下 实现拖拉式操作 用户只需要简单的将 JSF 组件拖到页面上 就可以很容易的进行 Web 开发了 这是其作为一种组件化的技术所具有的最大好处 我们能用的组件不光是一些比较简单的输入框之类 还有更多复杂的组件可以使用的 比如 DataTable 这样的表格组件 Tree 这样的树形组件等等

　　作为一种标准的技术 JSF还得到了相当多工具提供商的支持 同时我们也会有很多很好的免费开发工具可以使用 前不久 Sun Java Studio Creator 和 Oracle JDeveloper g 作为免费的支持 JSF 的开发工具发布 给 JSF 带来了不小的生气 另外我们也有一些很优秀的商业开发工具可共选择 BEA Workshop (原 M NitroX) Exadel MyEclipse 这样的基于 Eclipse 的插件开发工具 为现在广大的 Eclipse 用户带来了不小的便利 IBM 的 Rational Application Developer 和 Borland 的 JBuilder 也是很不错的支持 JSF 可视化开发的商业开发工具

　　JSF和传统的Web技术有着本质上的差别 在传统的Web技术需要用户自己对浏览器请求进行捕捉 保存客户端状态 并且手工控制着页面的转向 等等 而JSF的出现 无疑给我们带来了巨大的便利 JSF 提供了事件驱动的页面导航模型 该模型使应用程序开发人员能够设计应用程序的页面流 与 Struts 的方式向类似的是 所有的页面流信息都定义在 JSF 配置 XML 文件 (faces config xml) 中 而非硬编码在应用程序中 这很大程度简化了开发人员开发难度 简化了应用程序的开发

　　同时JSF也是一种遵循模型 视图－*** (MVC) 模式的框架 实现了视图代码(View)与应用逻辑(Model)的完全分离 使得使用 JSF 技术的应用程序能够很好的实现页面与代码的分离 所有对 JSF 页面的请求都会通过一个前端*** (FacesServlet) 处理 系统自动处理用户的请求 并将结果返回给用户 这和传统的 MVC 框架并没有太大的区别

　　在JSF中不仅使用了 POJO 技术 而且还使用了类似 Spring 的控制反转(IoC) (或称为依赖注入 DI) 技术 在 JSF 的 Backing Bean 中 我们可以把视图所需要的数据和操作放进一个 Backing Bean 中 同时得益于 JSF 使用的 DI 技术 我们可以在配置文件中初始化 Managed Bean 同时我们也可以通过这样的技术很方便的和使用类似技术的 Spring 进行整合

　　二 如何在JSP中使用JSF

　　JSF只有通过和JSP相结合 才能充分发挥它的功效 JSF是通过标签库和JSP进行集成的 标签库就相当于ASP NET的服务端组件 JSF提供了非常丰富的标签库 通过这些标签库 可以生成各种客户端模型 如HTML WML XML以及JavaScript等 通过这些标签 你可以很容易建立大规模的客户端模型 并由这些标签自动处理客户端请求

　　接下来让我们来看一个如何使JSF和JSP在一起工作的例子 在JSF中有两个库 第一个叫做内核库 在这个库中包含了各种主要的标签 如配置组件 管理事件 验证输入信息等 第二个库的主要功能是将HTML和JSF的各种标签相对应 每一个JSF标签都会对应一个HTML组件 如UIInput标签对应了HTML中的文本框或密码框

　　在JSF标签中文本输入框叫做inputText 而密码输入库叫inputSecret 下面是一个简单的JSF和JSP结合的用户接口程序

　　＜%@ taglib uri="%＞ ＜%@ taglib uri="%＞ ＜＞ ＜head＞ ＜meta HTTP EQUIV="Content Type" CONTENT="text/;CHARSET=GB "＞ ＜title＞第一个JSF程序＜/title＞ ＜/head＞ ＜body＞ 　＜f:view＞ 　＜h:form id="******Form"＞ 　＜h:outputText id="favoriteLabel" value="请输入一个数字 "/＞ 　＜h:inputText id="favoriteValue" value="#{****** longValue}"＞ 　　＜f:validateLongrange maximum=" " minimum=" "/＞ 　＜/h:inputText＞ 　＜p/＞ 　＜h:mandButton id="submit" value="提交" action="#{****** ******ActionMethod}"/＞ 　＜/h:form＞ 　＜/f:view＞ ＜/body＞ ＜/＞

　　在上面的代码中 我们可以了解到JSF是如何同JSP集成的 我们首先可以看到一个内核标签 view 然后是几个JSF组件 如form outputText inputText以及mandButton 这几个组件被放到form中从而开成了form中的一部分 在程序的最开始 必须使用import导入两个标签库 代码如下

　　＜%@ taglib uri="%＞ ＜%@ taglib uri="%＞

　　上面 行代码声明了JSP中要使用哪一个JSF标签库 内核库使用前缀（prefix）f声明 而HTML库使用前缀(prefix)h声明 这两个前缀并不是必须要使用 而只是一个建议 在程序中 内核库必须要使用 因为view在所有的JSF页中必须使用 而HTML标签在运行时将JSF标签转化为HTML组件 这个h前缀并不是必须的 而是JSF规范推荐使用的 这样 我们使我们的JSF程序更易读

　　在声明后是几行标准的HTML语句 本文不再详述 从＜f:view＞开始 是一段JSF语句 这段代码如下所示

　　＜f:view＞ ＜h:form id="******Form"＞ ＜h:outputText id="favoriteLabel" value="请输入一个数字 "/＞ ＜h:inputText id="favoriteValue" value="#{****** longValue}"＞ ＜f:validateLongrange maximum=" " minimum=" "/＞ ＜/h:inputText＞ ＜p/＞ ＜h:mandButton id="submit" value="提交" action="#{****** ******ActionMethod}"/＞ ＜/h:form＞ ＜/f:view＞

　　＜/f:view＞标签预示著JSF的开始 而它的下一个标签form将建立一个HTML Form 而outputText标签相当于HTML中的label组件 inputText标签相当于HTML中的textField组件 而mandButton标签相当于HTML中的submit按钮 运行这个JSP程序 将得到如图 所显示效果

　　 图 第一个JSF程序的运行结果

　　三 JSP如何响应JSF的请求

　　从上面的例子我们已经知道如何在JSP中使用JSF了 在这一部分让我们来看看在JSF是如何处理请求的

　　首先让我们来看一个例子 这个例子是将华氏度转换为摄氏度 当用户点击提交按钮时程序将进行转换

　　＜%@ taglib uri="%＞ ＜%@ taglib uri="%＞ ＜＞ ＜head＞ 　＜meta HTTP EQUIV="Content Type" CONTENT="text/;CHARSET=GB "＞ ＜title＞温度转换程序＜/title＞ ＜/head＞ ＜body＞ 　＜f:view＞ 　＜h:form＞ 　＜div＞ 　　＜h:outputText id="fahrenheitLabel" value="请输入华氏温度 "/＞ 　　＜span＞ 　　　＜h:inputText id="temperature" value="#{tc fahrenheitTemp}"＞ 　　　＜f:validateDoublerange minimum=" " maximum=" "/＞ 　　　＜f:valuechangeListener type=tempconv page TCChangedListener/＞ 　　＜/h:inputText＞ 　　＜/span＞ 　＜/div＞ 　＜div＞ 　　＜h:outputText id="celsiusLabel" value="摄氏温度 "/＞ 　　＜span＞ 　　　＜h:outputText id="celsiusValue" value="#{tc celsiusTemp}"＞ 　　　＜f:convertNumber maxFractionDigits=" " type=number/＞ 　　＜/h:outputText＞ 　　＜/span＞ 　＜/div＞ 　＜div＞ 　　＜h:mandButton value="转换" action="#{tc convert}"＞ 　　＜/h:mandButton＞ 　＜/div＞ 　＜/h:form＞ 　＜/f:view＞ ＜/body＞ ＜/＞

　　在程序的前两行是导入JSF核心库和HTML库 这个在前面已经讨论过 在这里不再详述

　　下面让我们来看看JSF标签是如何同后端进行交互的 由于我们是在JSP中使用JSF 因此 这个和正常的JSP没有什么区别 JSP实际上就是Servlet 在JSP第一次运行时由JSP编译器将 JSP文件编译成Servlet后再由Servlet调用 然后由Servlet来接收客户端传过来的数据流 但和一般的JSP程序不同的是 JSF标签是由JSF API负责调用的（这样可以做到逻辑层和表现层分离） 除此之外 它们和一般的JSP标签没有任何区别

　　当UIComponent标签收到doStartTag方法时 JSF将使用这些属性来设置标签的值 如本例中的inputText标签将按它的属性值来设置 下面是JSF的代码片段

　　＜h:inputText id="temperature" value="#{tc fahrenheitTemp}"＞ 　＜f:validateDoublerange minimum=" " maximum=" "/＞ 　＜f:valuechangeListener type=tempconv page TCChangedListener/＞ ＜/h:inputText＞

　　inputText标签根据相应的值设置了id和value的属性 在JSF中是通过setAttribute(String name Object value)设置每一个属性值的 但我们需要注意的是JSF标签可以指定相应的默认值 这有些类似java中的系统属性 如果你给了一个属性名子 那系统将返回这个属性的值 如果指定它的默认值 并且这个属性不存在的话 将返回这个默认值

　　接下来让我们来看看上面程序的最重要的部分 也就是UIInput组件的事件处理

　　＜f:valuechangeListener type=tempconv page TCChangedListener/＞

　　在JSF中事件处理是由valuechangeListener标签完成的 这个标签所表示的事件在文本框的值发生变化时引发事件 但有意思的是这个事件并不马上提交 而是要等到用户点击"提交"按钮后这个事件连同相应的数据才提交给后端 因此 这个事件请求也叫做预提交 最后 让我们看看UICommand的代码实现

　　＜div＞ 　＜h:mandButton value="转换" action="#{tc convert}"＞ 　＜/h:mandButton＞ ＜/div＞

　　上面的代码将convert()方法和UICommand连接了起来 也就是说 点击"提交"按钮后 将执行convert()方法 在遇到view标签后 JSF程序结果 JSFAPI最后调用doEnd方法来结束JSF程序 JSF引擎在解析这段程序后 将相应的JSF标签转换为HTML组件

　　最后 让我们来看看JSP是如何响应JSF事件的 下面是一段响应JSF事件的Java代码

　　public class TCChangedListener implements ValueChangeListener { 　public TCChangedListener() 　{ 　　super(); 　} 　// 事件处理 　public void processValueChange(ValueChangeEvent event) throws AbortProcessingException 　{ 　　UIComponent p = event getComponent(); 　　Object value = event getNewValue(); 　　if (null != value) 　　{ 　　　float curVal = ((Number) value) floatValue(); 　　　Map values = p getAttributes(); 　　　if (curVal ＜ ) 　　　{ 　　　　values put("styleClass" "red"); 　　　} 　　　else 　　　{ 　　　　values put("styleClass" "black"); 　　　} 　　} }

jsp中可以写入javascript么

可以，也可以嵌入进来
用《script
src="Javascript的路径"》前蔽袜《/script》
而且也可慧激以用《script》《/script》标签写js代码，js那里都可并毁以嵌入的

如何在jsp中插入javascript

当然可以了，jsp的本质就是html文件嘛。
《script type="text/javascript"》
alert("我弹出来了！");
《/script》
这段代码随便贴在jsp文件的哪里都行，你运行一下试试。

Jsp和javascript能嵌套使用吗

J**ASCRIPT能执行吗？ 补充： 那么J**ASCRIPT中能嵌套JSP代码块吗仿仿茄大渣？ 满意答案gen12级2009-06-03可以，这个JavaScript代码是在客户端执行的，所以实际上等同于resposne.write输出客户端html代码。 追问： 那么J**ASCRIPT中能嵌套JSP代码块吗？ 回答： 不能，因为JavaScript是客户端脚本，jsp是服务器端脚本，后者可以在服务端执行并编译输出客户端html代码（包括JavaScript、css）。 追问： 那J**ASCRIPT中有JSP代码块的话，
点击某个按钮时调用J**ASCRIPT涵数，然后去数据备察库查

jsp与js结合的用法

不能实现的，你传给用户的是已经解释好的html代码，jsp页面的程猛敏序是在服务器端运行的。
你要关闭的时候调用java代码，只能用ajax做，当枝桥枝页面关闭时会消基触发onbeforeunload
这个事件，然后用ajax给传递到后台。
ajax如果不会用的话就麻烦了啊。

js调用jsp的问题

js中不能直接调用jsp，要获取数据可以通过ajax接口异步获取，然后在jsp上展示。
function validate() {
//获取表单提交的内容
var idField = document.getElementById("userName");
//访问validate.do这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给validate.do
var url = "validate.do?id=" + escape(idField.value);
//创建一个XMLHttpRequest对象req
if(window.XMLHttpRequest) {
//IE7, Firefox, Opera支持
req = new XMLHttpRequest();
}else if(window.ActiveXObject) {
//IE5,IE6支持
req = new ActiveXObject("Microsoft.XMLHTTP");
}
/*
open(String method,String url, boolean )函数有3个参数
method参数指定向servlet发送请求所使用的方法，有GET,POST等
boolean值指定是否异步，true为使用，false为不使用。
我们使用异步才能体会到Ajax强大的异步功能。
*/
req.open("GET", url, true);
//onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态
req.onreadystatechange = callback;
//send函数发送请求
req.send(null);
}

function callback() {
if(req.readyState == 4 && req.status == 200) {
var check = req.resp***eText;
show (check);
}
}

function show(str) {
if(str == "OK") {
var show = "《font color=’green’》恭喜！！用户名可用！《/font》";
document.getElementById("info").innerHTML = show;
}
else if( str == "NO") {
var show = "《font color=’red’》对不起，用户名不可用！！请重新输入！《/font》";
document.getElementById("info").innerHTML = show;
}
}

能不能在javascript中嵌入jsp代码

在javascript中嵌入jsp代码和在jsp中动态组装javascript代码是不一样的概念。

如果你的javascript写在了html页面中，那么你的jsp代码是不会被编译的。

如果你在jsp中动态组装了javascript代码，那么jsp页面会被编译为一个class类，这个类会跟你写的逻辑会输出（out.println()方式）javascript代码。举例来说：

1. 在javascript中写jsp代码：

   《javascript》

         alert(“《% int i=1; i++; out.println(i); %》”);

   《/javascript》

   上面的代码段如果放在jsp页面中《% int i=1; i++; out.println(i); %》会被编译，但是放在HTML页面中不会被编译。

2. 在jsp页面中动态组装javascript代码：

   《% if(loginType =="admin"){

        out.println("《javascript》 function ShowType{            document.getElementById(’type’).innerHTML = "admin" } 《/javascript》");

   }else{

        out.println("《javascript》 function ShowType{ document.getElementById(’type’).innerHTML = "admin" } 《/javascript》");
   

   }%》
   

   上面这个jsp代码段放在合适的jsp页面中这个javascript是会被发送到client的，你就可以在client使用这个ShowType方法。

总之一句话：javascript代码是给浏览器执行的，jsp代码是在server端编译的，jsp代码必须放在jsp页面中经server编译，而javascript只要发送给client就行。