JSP数据和JavaScirpt数据交互使用问题的一种解决方法

JSP数据和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="提交" οnclick="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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
(1)以下是一个使用ajax请求并显示HTML页面内容的示例: ```html <!DOCTYPE html> <html> <head> <title>Ajax请求HTML页面示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="btn">加载HTML页面</button> <div id="content"></div> <script> $(document).ready(function(){ $("#btn").click(function(){ $.ajax({ url: "example.html", success: function(data){ $("#content").html(data); // 将获取到的HTML代码插入到页面中 } }); }); }); </script> </body> </html> ``` 这个示例中,我们使用了jQuery库来简化ajax请求操作。当用户点击“加载HTML页面”按钮时,我们使用ajax请求获取example.html页面的内容,并将其插入到id为“content”的div中。 (2)以下是一个使用javascript请求JSON网页的示例: ```html <!DOCTYPE html> <html> <head> <title>Ajax请求JSON网页示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="btn">请求JSON数据</button> <div id="content"></div> <script> $(document).ready(function(){ $("#btn").click(function(){ $.getJSON("example.json", function(data){ $("#content").html(JSON.stringify(data)); // 将获取到的JSON数据转换成字符串并插入到页面中 }); }); }); </script> </body> </html> ``` 这个示例中,当用户点击“请求JSON数据”按钮时,我们使用getJSON方法请求example.json文件的内容,并将其转换成字符串后插入到id为“content”的div中。注意,$.getJSON方法已经将响应的数据自动解析成了一个JavaScript对象,因此我们可以直接使用data变量来访问其属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值