1, If the a tag's href or form submission will trigger page refresh, the back-end function can directly redirect the user. However, if it is an asynchronous request $. get(), it cannot**
The first case is href+HttpResponseRedirect
Welcome: <span>{{ username }}</span> <a href="/logout/" style="color: #b097b5; Text decoration: None "> Exit</a>
def logout(request):
auth.logout(request)
return HttpResponseRedirect('/login/')
In the second case, jquery $. get() is used to initiate this method, which needs to introduce jquery
<script src="/static/201908059658/js/jquery-1.11.0.min.js" type="text/javascript"></script>
$. get("your url",{json format parameter}, function (ret receives the return value from the back end) {what you can do after receiving the return value})
For requests initiated in this way, the backend needs to return strings such as True, False, 0, 1, success and failure. That is to say, if the backend still uses HttpResponseRedirect redirection at this time, it is invalid. The example code is as follows:
function login(){
username = document.getElementById('username').value;
password = document.getElementById('password').value;
$.get("/login_action/",{
"username":username,
"password":password
},function (ret){
if(ret == 'success'){
document.location.href = '/home/'
}else{
alert('Your user name or password is wrong!')
}
})
}
def login_action(request):
username = request.GET.get('username', '')
password = request.GET.get('password', '')
user = auth.authenticate(username=username, password=password)
# If the user name and password are found in the database, verify them
if user is not None:
auth.login(request, user)
request.session['user'] = username
return HttpResponse('success')
else:
return HttpResponse('fail')
2, There are four ways to initiate a request in html: the first is to write a js function directly, and then call it in the element tag through attributes such as onclick, submit and href; the second is to write a js statement directly in the tag through onclick; the third is to submit a form, the action of the form, the type="submit" of method + button; and the fourth is the href="/logout /" of a tag
Code example of the first
<button type="submit" onclick="login()" style="">Sign in</button>
<scripts>
function login(){
username = document.getElementById('username').value;
password = document.getElementById('password').value;
$.get("/login_action/",{
"username":username,
"password":password
},function (ret){
if(ret == 'success'){
document.location.href = '/home/'
}else{
alert('Your user name or password is wrong!')
}
})
}
</scripts>
Second, sample code
<span style="font-size: small;color: grey;">click
<a href="#"Onclick =" javascript: document. Getelementbyid ('add_project_div '). Style. Display ='block' "> new project</a>
You can create a new project that belongs to you!
</span>
This is the same as the following
<span style="font-size: small;color: grey;">click
<a href="#" onclick="javascript:add_ Project() "> new project</a>
You can create a new project that belongs to you!
</span>
function add_project(){
document.getElementById('add_project_div').style.
display='block'
}
Third,
<form action="/goLogin/" method="post">
<div id="fade-box">
<input type="text" name="username" id="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Log In</button>
</div>
</form>
The fourth one is applicable to logout, which does not require parameters
<a href="/logout/">Logout</a>
3, jQuery.inArray() method
<script>
if("{{ project.global_datas }}" != "None" && "{{ project.global_datas }}" != ""){
if($.inArray("{{ i.id }}","{{ project.global_datas }}".split(',')) != -1){
document.getElementById("check_{{ i.id }}").checked = "checked"
}
}
</script>
The $. inArray() function is used to find the specified value in the array and return its index value (or - 1 if not found)
Tip: the source array will not be affected, and the filtering results will only be reflected in the returned result array.
grammar
$.inArray( value, array [, fromIndex ] )
other
<body>
<div>"John" When the index value is <span></span> The location of the was found</div>
<div>4 When the index value is <span></span> The location of the was found</div>
<div>"Karl" Not found, so return <span></span> </div>
<div>"Pete" In the array, but not where the index value is greater than or equal to 2, so it returns <span></span></div>
<script>
$(function () {
var arr = [ 4, "Pete", 8, "John" ];
var $spans = $( "span" );
$spans.eq( 0 ).text( jQuery.inArray( "John", arr ) );
$spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );
$spans.eq( 2 ).text( jQuery.inArray( "Karl", arr ) );
$spans.eq( 3 ).text( jQuery.inArray( "Pete", arr, 2 ) );
})
</script>
</body>
4, javascript
s.charCodeAt(x)
The ascii code of the element corresponding to the index x of the output string s
var s = "HELLO WORLD"; undefined s.charCodeAt(0) 72 s.charCodeAt(1) 69
**s.charAt(x) **
The element corresponding to the index x of the output string s
s = "hello world" "hello world" s.charAt(0) "h" s.charAt(3) "l"
s.toUpperCase()
Convert all strings s to uppercase
"ac fed Adsdsd".toUpperCase() "AC FED ADSDSD"
s.slice(x)
After the output string s cuts off the elements corresponding to index x, s the remaining string. Index x starts from 1, and 0 is the complete string itself
s = "runoob" "runoob" s.slice(0) "runoob" s.slice(1) "unoob" s.slice(1) "unoob"
5, a the difference between href="/logout /" and href="logout /" in the tag
Welcome: <span>{{ username }}</span> <a href="/logout/" style="color: #B097b5; text decoration: None "> Exit</a>
/Logout /: absolute path, which means to spell / logout / from the domain name. After clicking, the jump link is host/logout /.
Logout /: relative path, which means that logout / is spelled from the current path. For example, if the url of the current page is 127.0.0.1:8000/home, the link to jump after clicking is host/home/logout /.
Then some people say that I can write directly in the url in the href?
The answer is: of course. However, the effect here is different from that of the previous two. After clicking, you will directly jump to the full url of href, and the current local domain name will be replaced, such as href=“ https://www.baidu.com ", after clicking, it will directly jump to Baidu, which has nothing to do with the current domain name.
6, New django project common operation records to avoid forgetting
Create project: Django admin startproject project project name
Create application: after entering the project, Django admin startapp the application name
Synchronization / validation table structure: in the project root directory, python3 manage.py makemigrations and python3 manage.py migrate
Create a background super administrator: in the project root directory, python3 manage.py createsuperuser, and then enter the user name / mailbox / password
Start project
6, html, extends and include are introduced into html
As a component page, it is embedded into a main page without affecting the DOM display of the main page
{% include "menu.html" %}
menu.html will directly cover the entire page of the original HTML, that is, after this introduction, only the contents of the menu will be displayed
{% extends "menu.html" %}
7, The data input from the form is stored and the data input from the front end is obtained through the interface in the view
html
<form action="/login/" method="post">
<div id="fade-box">
<input type="text" name="username" id="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Log In</button>
</div>
</form>
view
def login(request):
username = request.POST.get('username',None)
password = request.POST.get('password',None)
print(username,password)
name="username", where username is a variable name, which is used to represent the data entered in the input tag. The value attribute is not displayed by default. We can write or not when writing html. We can obtain the value through the dom element. value().
request.POST.get('username',None) the username here is the variable name to get. The value corresponding to the name attribute of the input tag is one-to-one correspondence. Otherwise, the value will not be obtained.
8, Three implementation methods of page Jump after successful login
def login(request):
username = request.POST.get('username',None)
password = request.POST.get('password',None)
print(username,password)
user = auth.authenticate(username=username,password=password)
print(type(user))
if not user :
# If the user is None, it means that the user does not exist, and jump to the login page
return HttpResponseRedirect('/login/') # redirect
# return render(request,'login.html',{}) # Copy the return of the login page (not recommended)
# return loginPage(request) # Call the login page function of the current module
# If user has a value, it indicates that the user exists and logs in
auth.login(request,user)
# Login succeeded. There are two kinds of cookie s
request.session['user'] = username
# Finally, jump to the home page
return HttpResponseRedirect('/home/')