Many login interfaces have a verification code functionajaxPartial refresh effect. Next, I will share with you through this articleajaxRealize partial refresh login interface with verification code, forajaxInterested friends, let’s take a look
Most of the current login interfaces have: verification code function + partial refresh of verification code + ajax login. The most obvious benefit of logging in with ajax is that it is fast and the URL address does not change. Nowadays, the login function rarely uses form post submission. Most of them have used ajax to access the background locally and then parse the return value and display the result on the interface. The theory still needs to be put into practice to be verified. Let’s go directly to the code.
Run interface:
1. The verification code background access part has been introduced in the previous blog. Here we introduce how to use src in img to achieve partial refresh. Verification code function.
html part:
1 2 3 4 5 6 7 |
|
js part:
1 2 3 4 5 |
|
The most important part of this part is $("#codePic").attr("src","http:/ /127.0.0.1:8888/TP/codePic?flag="+Math.random()); This part of the code. If you don’t add flag="+Math.random(), the partial refresh function cannot be implemented. Because if the address in src is the same every time it is accessed, it will not be updated. You can know why this happens. Go and study. CodePic is actually an action. The function of this action is to use the java brush to draw the verification code and package it into a picture and return it to the src in the img.
2. Use the modal in bootstrap to implement the dialog box. Function. Because it is necessary to verify whether the user name or password is empty before logging in. If an error occurs, a dialog box needs to pop up to prompt the user. The verification part is implemented with js, and the dialog part is implemented with bootstrap modal
##. #html dialog part:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
1 2 3 4 5 6 |
|
1 2 3 4 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
|
Related recommendations:
##ajax login jump login implementation##JQuery ajax partial refresh example
jquery pop-up window + ajax partial prompt, how to deal with it
The above is the detailed content of Ajax implements partial refresh login interface with verification code. For more information, please follow other related articles on the PHP Chinese website!