Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.