JSP于JS的交互

P数据和JavaScirpt数据交互使用问题的一种解决方法
对于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脚本中用<%=strVar1%>就可以把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(Java Server Pages)JavaScript之间的交互中,二者分别运行于不同的环境中:JSP是服务器端技术,负责生成HTML页面内容;而JavaScript则是客户端脚本语言,用于处理页面的动态行为和用户交互。尽管它们运行环境不同,但可以通过多种方式实现数据传递功能调用。 ### JSPJavaScript 传递数据 1. **嵌入变量** 可以通过JSP脚本将后端数据直接嵌入到JavaScript代码中,从而实现数据从JSPJavaScript的传递。例如: ```jsp <% String message = "Hello from JSP"; %> <script type="text/javascript"> var msg = "<%= message %>"; console.log(msg); // 输出: Hello from JSP </script> ``` 上述代码中,`<%= message %>`是JSP表达式,用于将服务器端变量输出到HTML页面中,JavaScript则可以直接使用该值[^1]。 2. **AJAX 请求** 使用JavaScript发起AJAX请求,向服务器发送HTTP请求获取或提交数据,JSP作为后端可以接收并处理这些请求,并返回JSON、XML或纯文本等格式的数据[^2]。 示例代码如下: ```jsp <!-- index.jsp --> <script> fetch('data.jsp') .then(response => response.json()) .then(data => { console.log(data.message); // 输出: Hello via AJAX }); </script> ``` ```jsp <!-- data.jsp --> <% response.setContentType("application/json"); out.print("{\"message\": \"Hello via AJAX\"}"); %> ``` ### JavaScriptJSP 传递数据 1. **表单提交** JavaScript可以通过表单提交的方式将数据发送给JSP页面进行处理。例如,通过`<form>`标签结合JavaScript触发提交操作。 ```html <form id="myForm" action="process.jsp" method="post"> <input type="text" name="username" /> <button type="submit">Submit</button> </form> <script> document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); // 阻止默认提交行为 this.submit(); // 提交表单 }); </script> ``` 在`process.jsp`中,可以使用`request.getParameter("username")`来获取提交的数据并进行处理[^1]。 2. **URL 参数传递** JavaScript可以通过修改URL参数的方式向JSP传递数据,JSP页面可以通过`request.getParameter()`方法读取这些参数。 ```javascript window.location.href = "result.jsp?name=JohnDoe"; ``` 在`result.jsp`中: ```jsp <% String name = request.getParameter("name"); out.println("Welcome, " + name); %> ``` 3. **AJAX POST 请求** JavaScript还可以通过AJAX的POST方法向JSP发送数据,JSP接收到数据后可进行相应的处理。 ```javascript fetch('save.jsp', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'key1=value1&key2=value2' }).then(response => response.text()) .then(data => console.log(data)); ``` 在`save.jsp`中: ```jsp <% String value1 = request.getParameter("key1"); String value2 = request.getParameter("key2"); out.print("Received values: " + value1 + ", " + value2); %> ``` ### 总结 JSPJavaScript之间可以通过多种方式进行交互,主要依赖于JSP生成HTML内容的能力以及JavaScript对DOM的操作和网络请求的支持。这种前后端协作机制为构建动态网页提供了强大的支持。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值