Sometimes we want Jsp to implement display and Js to implement logic control at the front end. In this process, Js and Jsp need to interact with some variable values. Jsp page Jump can also be controlled through Js. Let's look at the following example:Login-> check username and password-> welcome page
The included files are as follows: logon page: Login. jsp, Login. js; Welcome Page: Welcome. jsp, Welcome. js
Login. jsp:
<Script type = "text/javascript" src = "Login. js"> </script>
<Form
Action ="Home. jsp"
Method ="Post">
<Table> <tbody> <tr> <td> UserName: </td>
<Td> <input
Type ="Text"
Name ="Username"/> </Td> </tr>
<Tr> <td> Password: </td> <input
Type ="Text"Name ="Password"/> </Td> </tr>
<Tr> <td> <input
Type ="Submit"Onclick = "doLogin ()" value ="Login"/> </Td>
<Td
Align ="Center"> <Button onclick = "doClear ()"> cancel </button> </td> </tr> </tbody>
</Table> </form>
In the code above, a form is used to send the user name and password to the backend for verification. The service method is called through Js. For details, refer to the following Js file. The parameters passed by Jsp can be obtained on the welcome. jsp page.
Login. js
//The doLogin () method mainly calls the business layer method to determine whether the user name and password exist. You can log on
FunctionDoLogin (){
VarUserDto =
NewObject ();
UserDto. name =
Document. getelementbyid ('username'). value;
Userdto. Password =
Document. getelementbyid ('Password'). value;
Userservicedwr. login (userdto, {callback: handlelogin, errorhandler: handleloginerror}); // call DWR to check whether a user exists in the background database. This can be any business logic method.
}
FunctionHandlelogin (result ){
If(Result ){
Window. Location. href = "Welcome. jsp ";
// Jump to the welcome page after Successful Logon
}Else{
Document. getelementbyid ('errormsg '). innerhtml =
'Login failed, please check the username and password .';
}
}
FunctionDoclear (){
Document. getelementbyid ('username'). value = '';
Document. getelementbyid ('Password'). value = '';
}
FunctionHandleloginerror (){}
<SCRIPT>
FunctionGetUserName (){
VarUsername =
'<% = Request. getparameter ("username") %> ';
Alert (username );
// The username value in login. jsp is displayed in the pop-up box.
}
</SCRIPT>
<Div
Class ="Content">
<Div
Id ="WelcomeDiv"
Style ="Padding-top: 30px ;">
<Div> welcome
<% = Request. getParameter ("username ")
%> </Div>
<Button
Onclick = "getUserName ()"> click here to get user name. </button>
</Div>
</Div>
In the preceding code snippet, run <% = request. getParameter ("username") %>
The value of the username attribute passed by the form in Login. jsp is accessed. This operation is correct. If you want to put the getUserName () method in a separate Js, such as Welcome. js, that is, JavaScript code is not inserted in the Jsp file. Use the common <script type = "text/javascript" src ="
Welcome. js "> </SCRIPT> cannot be accessed by introducing JS files. The Code is as follows:
<SCRIPT type = "text/JavaScript" src = "Welcome. js"> </SCRIPT>
..... // Omit Part of the Code
<Div
Class ="Content">
<Div
Id ="WelcomeDiv"
Style ="Padding-top: 30px ;">
<Div> welcome
<% = Request. getparameter ("username ")
%> </Div>
<Button
Onclick = "GetUserName ()"> click here to get user name. </button>
</Div>
</Div>
The content popped up by Alert is '<% = request. getParameter ("username") %>', which means the above Code is treated as a string and not parsed. To parse '<% = request. getParameter ("username") %>' in a separate Js file, you need to use another JS import method. The Code is as follows:
<Script type = "text/javascript"> <% @ include file = ". Welcome. js" %> </script>
<Div
Class ="Content">
<Div
Id ="WelcomeDiv"
Style ="Padding-top: 30px ;">
<Div> welcome
<% = Request. getParameter ("username ")
%> </Div>
<Button
Onclick = "getUserName ()"> click here to get user name. </button>
</Div>
</Div>
In this way, the content displayed by clicking the Button is the username value passed in Login. jsp.
Welcome. js
FunctionGetUserName (){
VarUsername =
'<% = Request. getParameter ("username") %> ';
Alert (username );
}