How to implement a simple login page with HTML+jQuery
This article mainly introduces "how to achieve a simple login page in HTML+jQuery". In daily operation, I believe that many people have doubts about how to achieve a simple login page in HTML+jQuery. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to achieve a simple login page in HTML+jQuery". Next, please follow the editor to study!
Brief introduction
This article uses examples to show how to write a simple login page.
Will include the following several schemes: pure HTML, HTML+jQuery (form data) format, HTML+jQuery (json) format.
Common code (back-end interface)
Write the simplest login interface with SpringBoot.
Controller
Package com.example.controller; import com.example.entity.LoginVO;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController / / Cross-domain @ CrossOrigin//Rest style: return JSON@RestControllerpublic class LoginController {@ PostMapping ("login") public LoginVO login () {/ / omit user name and password judgment LoginVO loginVO = new LoginVO (); loginVO.setSuccess (true); loginVO.setData ("This is data"); return loginVO;}}
Pom.xml
4.0.0 org.springframework.boot spring-boot-starter-parent 2.3.0.RELEASE com.example demo_SpringBoot 0.0.1-SNAPSHOT demo_SpringBoot Demo project for SpringBoot org.springframework.boot spring-boot-starter-web example 1: simplest (pure HTML) code
Login.html
Login page username: password: login test
1. Visit login.html
two。 Enter user name and password
User name: enter abc; password: enter 1234
Result
Sample 2:HTML+jQuery (form data) code
Login.html
Login page username: password: login function loginViaJson () {$.post ("http://localhost:8080/login", / / data sent to the backend {" userName ": $(" .username ") .val ()," password ": $(" .password ") .post ()} / / callback function function (result) {if (! result.success) {$("# errormessage") .text ("wrong username or password") } else if (result.success) {alert ("login succeeded"); / / Jump to the index.html page _ window.location.href= "index.html" rel= "external nofollow" rel= "external nofollow";}})}
Index.html
Page test after successful login of This is title
The test result is the same as the previous "sample 2:HTML+jQuery (form data)"
1. Visit login.html
two。 Enter user name and password
User name: enter abc; password: enter 1234
3. Click to log in
4. Click OK
At this point, the study on "how to implement a simple login page for HTML+jQuery" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
