Home > Developer > Web Develop
Demand:
1: After entering the account password on the landing page, Ajax asynchronously submits the data to the backend verification.
2: After the verification is passed, the backend specifies the jump page and encapsulates the page into the returned JSON data, and the Ajax control from form jumps to the target page
One: Landing page HTML codePage jumps are done primarily through the action action of the Ajax control form form. Therefore, if the Action property has a URL, then the backend does not specify a jump page, it will default to jump to this page, the following code, the default jump to the home page
Another thing to note is: the use of the Submit () jump page, click on the button's type is button (online there are other methods of jumping, but I have not implemented, this method has been successfully completed under the form form the AJAX control jump)
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <Linkrel= "stylesheet"href= "/static/bootstrap-3.3.7/css/bootstrap.min.css"> <title>Document</title></Head><Body><Divclass= "Container"> <Divclass= "Row"style= "margin-top:100px"> <formID= "MyForm"class= "Form-horizontal"Action= "/home/"Method= "Get">{% Csrf_token%}<Divclass= "Form-group"> <labelclass= "Col-sm-4 Control-label">User name</label> <Divclass= "Col-sm-4"> <inputtype= "text"class= "Form-control"name= "username"placeholder= "User name"> </Div> </Div> <Divclass= "Form-group"> <labelclass= "Col-sm-4 Control-label">Password</label> <Divclass= "Col-sm-4"> <inputtype= "Password"class= "Form-control"name= ' pwd 'placeholder= "Password"> </Div> </Div> <Divclass= "Form-group"> <Divclass= "Col-sm-offset-4 col-sm-4"> <Buttontype= "button"class= "Btn Btn-default">Landing</Button> </Div> </Div> <Divclass= "Form-group"> <Divclass= "Col-sm-offset-4 col-sm-4"> <span>Hello World</span> </Div> </Div> </form> </Div></Div><Scriptsrc= "/static/jquery-3.3.1.min.js"></Script><Scriptsrc= "/static/bootstrap-3.3.7/js/bootstrap.min.js"></Script><Scriptsrc= "/static/setupajax.js"></Script><Scriptsrc= '/static/sweetalert '></Script></Body></HTML>Two: Back-end Login View File
defLogin (Request):ifRequest.method = ='POST': Username= Request. Post.get ('username') PWD= Request. Post.get ('pwd') User= Authenticate (Username=username, password=pwd)ifUser:#Validation SuccessfulLogin (request, user)#Edit the JSON data, where the URL can be set according to the requirementsdata = {'Code': 1,'URL':'http://www.baidu.com'} Else: #validation unsuccessful, return error reasondata = {'Code': 0,'msg':'incorrect user name or password'} returnjsonresponse (data)returnRender (Request,'login.html')Three: JS code
Logic Analysis:
1: After clicking the event, get the input box data and take it to the backend
2: To judge the data taken, verify the success of the backend assigned to the URL assigned to the form form the Action property, and finally control the form form to perform jumps. Validation fails with Popup prompt message
<script> $(': Button'). On ('Click', function () {var username= $(': Text'). Val (); var pwd= $(':p Assword'). Val (); var $form= $('#myform'); $.ajax ({URL:'/login/', type:'Post', Data:{username:username,pwd:pwd}, Success:function (data) {if(Data.code) {$form. attr ('Action', Data.url); Console.log ($form. attr ('Action')); $form. Submit ()}Else{alert (data.msg)}}) })</script>
Djangoform Form Ajax Control jump
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
