JSP页面与JS的思考

一：JSP页面的Java代码与JS代码执行顺序

首先明确->Jsp的本质：用于页面展示的Servlet。（Servlet可以理解为运行在服务器中的一段代码。）

①：Jsp转化为对应.java文件、编译成可执行的.class文件的时候 ->将Jsp页面的脚本、el表达式、JSTL表达式完成”解析”。

②：用户请求到一个Servlet，服务器内部响应JSP页面时，执行JSP页面对应.class文件。依靠response对象以流的形式输出HTML、CSS、JS到客户端，由浏览器完成解析。

结论：JSP页面的Java代码(脚本、EL表达式、JSTL表达式等。。。)是在服务器执行的，JSP页面的JS代码是由response对象以流的形式输出到客户端浏览器，由浏览器完成加载执行的。

二：JSP页面中JS代码的执行顺序（与HTML页面中JS代码的执行顺序一致。）

①：自上而下。JS加载的顺序也就是页面中<script>标签出现的顺序。<script>标签里面的或者是引入的外部JS文件的执行顺序都是其语句出现的顺序，其中JS执行的过程也是页面装载的一部分。

②：onload事件在页面装载完成的时候才执行。

注意点：JSP页面中的JS代码可以嵌入JAVA代码。（EL表达式、输出脚本动态给JS中的变量赋值。）这一部分在服务器内部就完成变量赋值。

var data=<%=emp.dept.deptid %>;  用JAVA脚本（建议EL表达式替代。）

var data="${emp.dept.deptid}";  //EL表达式需要加双引号

三：下拉框绑定后台数据

//绑定后台数据 1. select->指定Name

2. option中的value值绑定 id值（用于更新）

3. 显示值直接加到<option></option>中间

<select name="deptid">

    <c:forEach var="dept" items="${requestScope.list }">

        <option value="${dept.deptid }"}  >${dept.deptname }</option>

    </c:forEach>

</select>

四：给下拉框赋默认值

两种方案：

第一种： option中加入el表达式结合三元表达式。

<select name="deptid">

    <c:forEach var="dept" items="${requestScope.list }">

        <option value="${dept.deptid }" ${dept.deptid eq emp.dept.deptid ?"selected":""} >${dept.deptname }</option>

    </c:forEach>

</select>

核心： ${dept.deptid eq emp.dept.deptid ?"selected":"" }

第二种：动态绑定部门id,响应到浏览器，由JS代码完成。

个人不建议这种： ① 在浏览器中右键，JS代码对别人是可见。 ② 其次这段JS代码不能放在外部链接内。因为外部链接的JS文件不能书写JAVA代码，也无法由服务器完成变量赋值。

//给body设置页面加载事件

<body onload="loding()">

</body>

// loding事件源代码

<script type="text/javascript">

function loding() {

var dept = "${emp.dept.deptid}";

var all = document.getElementsByTagName("option");

for (var i = 0; i < all.length; i++) {

if (dept == all[i].value)

all[i].selected = true;

}

}

</script>

//JSP页面数据绑定

<select name="deptid">

    <c:forEach var="dept" items="${requestScope.list }">

        <option value="${dept.deptid }"  >${dept.deptname }</option>

    </c:forEach>

</select>

为什么要把第一二项加入到之前，因为，你必须知道他们的准确顺序，你才能准确把控程序的流程，也规范程序，避免不必要的麻烦。

JSP页面与JS的思考

猜你喜欢