One: Java code and JS code execution order of JSP page
First clarify the essence of -> Jsp: Servlet for page display. (Servlet can be understood as a piece of code running in the server.)
①: When Jsp is converted into a corresponding .java file and compiled into an executable .class file -> "parse" the script, el expression, and JSTL expression of the Jsp page.
②: The user requests a servlet, and when the server responds to the JSP page internally, the .class file corresponding to the JSP page is executed. Relying on the response object to output HTML, CSS, JS to the client in the form of a stream, and the browser completes the parsing.
Conclusion: The Java code (script, EL expression, JSTL expression, etc.) of the JSP page is executed on the server, and the JS code of the JSP page is output to the client browser in the form of a stream by the response object, and the browser Loader completes the load execution.
Two: The execution order of the JS code in the JSP page (consistent with the execution order of the JS code in the HTML page.)
①: From top to bottom. The order in which JS is loaded is the order in which the <script> tags appear in the page. The execution order of the external JS files in the <script> tag or imported is the order in which the statements appear, and the process of JS execution is also part of the page loading.
②: The onload event is only executed when the page is loaded.
Note: JS code in JSP pages can embed JAVA code. (EL expressions and output scripts dynamically assign values to variables in JS.) This part completes variable assignment inside the server.
var data=<%=emp.dept.deptid %>; Use JAVA script (recommended EL expression instead.)
var data="${emp.dept.deptid}"; //EL expressions need double quotes
Three: The drop-down box is bound to the background data
//Bind background data 1. select->specify Name
2. The value value in the option is bound to the id value (for updating)
3. The display value is directly added to the middle of <option></option>
<select name="deptid">
<c:forEach var="dept" items="${requestScope.list }">
<option value="${dept.deptid }"} >${dept.deptname }</option>
</c:forEach>
</select>
Four: Assign default values to the drop-down box
Two options:
The first one: add el expression to option combined with ternary expression.
<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":"" }
The second type: Dynamically bind the department id, respond to the browser, and complete it by JS code.
Personally do not recommend this: ① Right-click in the browser, the JS code is visible to others. ② Secondly, this JS code cannot be placed in an external link. Because the externally linked JS file cannot write JAVA code, nor can the server complete variable assignment.
//Set page load event for 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>
为什么要把第一二项加入到之前，因为，你必须知道他们的准确顺序，你才能准确把控程序的流程，也规范程序，避免不必要的麻烦。