尊重原创版权: https://www.gewuweb.com/hot/5401.html
Django基础五之Ajax
尊重原创版权: https://www.gewuweb.com/sitemap.html
1. Ajax介绍
2. Ajax前后端传值
在输入框一和输入框二中分别输入一个数字,然后点提交在第三个输入框中显示结果.
HTML 代码:
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input type="text" id="d1" >+
<input type="text" id="d2">=
<input type="text" id="d3">
<button id="d4" class="btn">提交</button>
</div>
</div>
</div>
</body>
2.1 方法一HttpResponse直接返回
html 页面代码:
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input type="text" id="d1" >+
<input type="text" id="d2">=
<input type="text" id="d3">
<button id="d4" class="btn btn-warning">提交</button>
</div>
</div>
</div>
<script>
$("#d4").click(function (){
var num1 = $("#d1").val();
var num2 = $("#d2").val();
console.log(num1, num2);
//拿到参数后使用Ajax向后提交
$.ajax({
url:"/index/", // 请求的地址
type:"post", // 请求的方式, 使用method()也可以
data:{num1:num1, num2:num2}, //指定要提交给后端的数据
success: function (res){ // 返回成功走sucess,接收后端返回的结果
// 后端返回的数据都放在res里面
console.log(res)
$('#d3').val(res)
// .val()里面什么都不写为取值, 如果里面写数据为设置值
}
});
})
</script>
</body>
views.py 代码
from django.shortcuts import render,HttpResponse
def index(request):
if request.method == 'POST': # if request.is_ajax(): 判断是不是ajax请求
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
return HttpResponse(n3)
return render(request, 'index.html')
2.2 方法二使用Json格式返回
上面例子返回的是个数字,如果返回的是多个值,或者是不同的类型,那么就要用 json 格式传输
2.2.1 HttpResponse 返回json类型
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
#if request.method == 'POST':
if request.is_ajax():
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
res_dict = {'username':'Hans', 'n3':n3}
import json
# 序列化成json类型的字符串
res_dict = json.dumps(res_dict)
return HttpResponse(res_dict)
return render(request, 'index.html')
** 前端处理Json **
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input type="text" id="d1" >+
<input type="text" id="d2">=
<input type="text" id="d3">
<button id="d4" class="btn btn-warning">提交</button>
</div>
</div>
</div>
<script>
$("#d4").click(function (){
var num1 = $("#d1").val();
var num2 = $("#d2").val();
console.log(num1, num2);
//拿到参数后使用Ajax向后提交
$.ajax({
url:"/index/", // 请求的地址
type:"post", // 请求的方式,使用method()也可以
data:{num1:num1, num2:num2}, //指定要提交给后端的数据
success: function (res){ // 接收后端返回的结果
// 后端返回的数据都放在res里面
// 后端传过来的是json格式的string,所以要先反序列化
res_json = JSON.parse(res)
// 取值
console.log(res_json.n3)
$('#d3').val(res_json.n3)
}
});
})
</script>
</body>
2.2.2 JsonResponse返回
** views.py **
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
# Create your views here.
def index(request):
if request.is_ajax():
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
res_dict = {'username':'Hans', 'n3':n3}
return JsonResponse(res_dict)
return render(request, 'index.html')
** 前端处理 **
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input type="text" id="d1" >+
<input type="text" id="d2">=
<input type="text" id="d3">
<button id="d4" class="btn btn-warning">提交</button>
</div>
</div>
</div>
<script>
$("#d4").click(function (){
var num1 = $("#d1").val();
var num2 = $("#d2").val();
console.log(num1, num2);
//拿到参数后使用Ajax向后提交
$.ajax({
url:"/index/", // 请求的地址
type:"post", // 请求的方式,使用method()也可以
data:{num1:num1, num2:num2}, //指定要提交给后端的数据
success: function (res){