JavaScript与JSP值互相调用

JavaScript与JSP值互相调用

 

 

获取后台的值，如request对象，

例如：获得权限信息并展示，一段JavaScript 代码如下

1）赋值给页面

 

<script  type=
"text/javascript"
>
    function
 initRight()
    {
        var
 rights=
'<%=(String)request.getAttribute("rights") %>'
;
        var
 rightArr = rights.split(
","
);
        var
 size = rightArr.length;
        var
 obj;
        for
(
var
 count =0 ; count<size;count++ )
        {
            obj = document.getElementById(rightArr[count]);
            if
(obj!=
null
 && obj.type == 
"checkbox"
)
            {
                obj.checked = true
;
                continue
;
            }
            if
(obj!=
null
 && obj.type == 
"hidden"
)
                obj.value=rightArr[count];
        }
    }

</script>

<script  type="text/javascript">
	function initRight()
	{
		var rights='<%=(String)request.getAttribute("rights") %>';
		var rightArr = rights.split(",");
		var size = rightArr.length;
		var obj;
		for(var count =0 ; count<size;count++ )
		{
			obj = document.getElementById(rightArr[count]);
			if(obj!=null && obj.type == "checkbox")
			{
				obj.checked = true;
				continue;
			}
			if(obj!=null && obj.type == "hidden")
				obj.value=rightArr[count];
		}
	}

</script>

 2）展示给客户

 对应html代码如下

<
tr
>
    <
td
 
align
=
"left"
>
        知识库管理

    </
td
>
</
tr
>

<
tr
>
    <
td
 
align
=
"right"
>
        <
table
 
width
=
"95%"
 
align
=
"right"
 
class
=
"roletable"
            id
=
"label_aaa_03"
>
            <
tr
 
class
=
"bgcolor_gray"
>

                <
td
 
width
=
"15%"
>
                    知识库管理

                </
td
>

                <
td
 
align
=
"left"
 
class
=
"bgcolor_gray"
>
                    <
input
 
name
=
"rightId"
 
type
=
"checkbox"
 
id
=
"query|4"
 
value
=
"query|4"
 
onclick
=
"rightOncheck({0:'update|4',1:'query|4'},'query|3','query|3')"
>
                    查询
                    <
input
 
name
=
"rightId"
 
type
=
"checkbox"
 
id
=
"update|4"
 
value
=
"update|4"
 
onclick
=
"rightOncheck({0:'update|4',1:'query|4'},'query|3','query|3')"
>
                    修改
                    <
input
 
name
=
"rightId"
 
type
=
"hidden"
  
id
=
"query|3"
>
                </
td
>
            </
tr
>

        </
table
>
    </
td
>
    </
tr
>
<
tr
>

							<tr>
								<td align="left">
									知识库管理

								</td>
							</tr>

							<tr>
								<td align="right">
									<table width="95%" align="right" class="roletable"
										id="label_aaa_03">
										<tr class="bgcolor_gray">
										
											<td width="15%">
												知识库管理

											</td>
											
											<td align="left" class="bgcolor_gray">
												<input name="rightId" type="checkbox" id="query|4" value="query|4" onclick="rightOncheck({0:'update|4',1:'query|4'},'query|3','query|3')">
												查询
												<input name="rightId" type="checkbox" id="update|4" value="update|4" onclick="rightOncheck({0:'update|4',1:'query|4'},'query|3','query|3')">
												修改
												<input name="rightId" type="hidden"  id="query|3">
											</td>
										</tr>
										
									</table>
								</td>
								</tr>
							<tr>

 

 3）

 

function
 rightOncheck(eles,destId,destVal)
{

    if
(
null
 != eles)
    {
        var
 element;
        var
 setValue = 
false
;
        for
(
var
 v 
in
 eles)
        {

            var
 tempv = document.getElementById(eles[v]).value;
            var
 strv;

            if
($Id(eles[v]).checked)
            {

                if
(eles[v].indexOf(
"Update"
)>0)
//新增
                {

                    strv =eles[v].replace("Update"
,
"Query"
);

                    document.getElementById(strv).checked=true
;
                }
                if
(tempv.indexOf(
"update|"
)>-1)
//修改
                {
                    strv =eles[v].replace("update"
,
"query"
);
                    document.getElementById(strv).checked=true
;
                }
                setValue=true
;
            }
        }
        var
 val=setValue?destVal:
""
;
        $Id(destId).value=val;
    }
}

function rightOncheck(eles,destId,destVal)
{
	
    if(null != eles)
    {
        var element;
        var setValue = false;
        for(var v in eles)
        {
        	
        	var tempv = document.getElementById(eles[v]).value;
        	var strv;

            if($Id(eles[v]).checked)
            {
          
            	if(eles[v].indexOf("Update")>0)//新增
            	{
            		
            		strv =eles[v].replace("Update","Query");

            		document.getElementById(strv).checked=true;
            	}
            	if(tempv.indexOf("update|")>-1)//修改
            	{
            		strv =eles[v].replace("update","query");   
            		document.getElementById(strv).checked=true;
            	}
                setValue=true;
            }
        }
        var val=setValue?destVal:"";
        $Id(destId).value=val;
    }
}

 

function
 $name(name){
return
 document.getElementsByName(name);}
function
 $Id(id){
return
 document.getElementById(id);}

function $name(name){return document.getElementsByName(name);}
function $Id(id){return document.getElementById(id);}

 

 

一、页面中的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
 = 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
>

<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
>