Ajax in Django

Time:2020-9-14

Django is a free open source website framework developed by python, which can be used to quickly build high-performance and elegant websites!

Ajax = asynchronous JavaScript and XML.

AJAX is not a new programming language, but a new way to use existing standards.

AJAX is the art of exchanging data with the server and updating some web pages without reloading the entire page.

Ajax

Most of the time, we do not need to refresh the page when we request an operation on the web page. The technology to implement this function is Ajax!

Ajax in jQuery can realize the function of requesting or submitting data to the background without refreshing the page. We still use it to do Ajax in Django, so download jQuery first. The higher the version, the better.

1、 Ajax sends simple data types:

HTML code: Here we just send a simple string

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title></title>
</head>
<body>
< input type = "button" onclick = "ajaxsubmit();" value = submit ">"
<script src="/static/jquery-...min.js"></script>
<script>
function AjaxSubmit(){
var host = '...';
var port = '';
$.ajax({
url:"/app/ajax_submit/",
type:'POST',
data:{host:host,port:port},
success: function (arg) {
}
});
}
</script>
</body>
</html>

Django in app views.py

# coding:utf-8
from django.shortcuts import render,HttpResponse
def ajax_submit(request):
print  request.POST  #Data from client
return render(request,'ajax_submit.html')

Printed data style:

 

2、 Ajax sends complex data types:

HTML code: Here we only send a list containing the dictionary data type

Since the data type sent is in the format of list dictionary, we need to convert them into string format in advance. Otherwise, the data format received by the background program is not the type we want, so we need JSON when transmitting data with Ajax

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title></title>
</head>
<body>
<input type="button" onclick="AjaxSubmit_ Set(); "value = commit set" > "
<script src="/static/jquery-...min.js"></script>
<script>
function AjaxSubmit_set(){
var data_list = [
{'name':'chenchao','age':},
{'name':'lisi','age':},
{'name':'wangwu','age':}
];
$.ajax({
url:"/app/ajax_submit_set/",
type:'POST',
tradition:true , native mode
data:{data:JSON.stringify(data_list)},
success: function (arg) {
}
});
}
</script>
</body>
</html>

Django in app views.py


def ajax_submit_set(request):
print request.POST
return render(request,'ajax_submit.html') 

Printed data style:

 

3、 Wait a minute. It’s not over.

Although we have realized the function, but this is not enough, because it is not very professional, so we will deal with it a little bit.

Success: function (ARG) {} if Ajax submits data successfully, the functions in it will be executed automatically

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title></title>
</head>
<body>
< input type = "button" onclick = "ajaxsubmit();" value = submit ">"
<input type="button" onclick="AjaxSubmit_ Set(); "value = commit set" > "
<script src="/static/jquery-...min.js"></script>
<script>
function AjaxSubmit(){
var host = '...';
var port = '';
$.ajax({
url:"/app/ajax_submit/",
type:'POST',
data:{host:host,port:port},
success: function (arg) {
}
});
}
function AjaxSubmit_set(){
var data_list = [
{'name':'chenchao','age':},
{'name':'lisi','age':},
{'name':'wangwu','age':}
];
$.ajax({
url:"/app/ajax_submit_set/",
type:'POST',
tradition:true,
data:{data:JSON.stringify(data_list)},
Success: function (ARG) {// if the program is executed successfully, the function here will be executed
var callback_dic = $.parseJSON(arg);
if(callback_dic.status){ 
Alert ('success');
}else{
alert(callback_ dic.error ); // display the error information from the background
}
}
});
}
</script>
</body>
</html>

Django in app views.py


# coding:utf-
from django.shortcuts import render,HttpResponse,redirect
def ajax_submit(request):
print request.POST
return render(request,'ajax_submit.html')
import json
def ajax_submit_set(request):
ret = {'status': True,'error': ""}
try:
print request.POS
except Exception, e:
ret['status'] = False
ret['error'] = str(e)
j_ret = json.dumps(ret)
return HttpResponse(j_ret)

The use of Ajax in Django

The front-end Ajax code is as follows:


$.ajax({
type:'GET',
url:'/store/ds_mgmt_wx/ajax_handle',
dataType:'html',
success:function(data)
{
alert(data);
},
error:function(data)
{
alert(data); 
}
});

The return method of the corresponding code of the back end is as follows:


if act_job == 'ajax_handle':
return HttpResponse('ajax_handle')

Django about Ajax in the small series to introduce you here, I hope to help you!