1、jquery AJAX说明
- Jquery其实就是一个JavaScript的类库,它将复杂的功能做了上层封装,使得开发者更容
易使用,,从而提高了开发效率 - Jquery Ajax本质是 XMLHttpRequest 或 ActiveXObject
2、AJAX与传统开发模式的区别
- ajax开发模式:页面将用户通过ajax引擎与服务器进行通信,将返回的结果给ajax引擎,
然后ajax将护具插入指定位置 - 传统的开发模式:用户的每次操作都触发一次返回服务器的HTTP请求,服务器做出处理后,
返回一个html页面给客户
3、AJAX作用
- AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- AJAX = Asynchronous JavaScript and XML (异步的 javaScript 和 XML)
- AJAX 不是新的编程语言,而是一种使用现有标准的新方法
4、使用JQuery AJAX发送数据
from django.shortcuts import render, HttpResponse
from django.views import View
import json
class Login(View):
def get(self, request):
return render(request, 'login.html')
def post(self, request):
print(request.POST)
ret = {'code': True, 'data': None}
return HttpResponse(json.dumps(ret, ensure_ascii=False), content_type='application/json')
// login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id='add_form'>
<input type='text' name='user' placeholder='用户名'>
<input tupe='password' name='pwd' placeholder='密码'>
<span id='jquery_ajax'>JQuery Ajax提交</span>
</form>
<script src='/static/jquery-1.12.4.js'></script>
<script>
$('#jquery_ajax').click(function(){
$.ajax({
url: '/login/',
data: $('#add_form').serialize(),
type: 'POST',
dataType: 'JSON',
traditional: true,
success: function(data, statusText, xmlHttpRequest){
if(data.code == true){
console.log('返回登录后的页面');
}else{
console.log('在页面上添加错误提示信息');
}
},
error: function(){
}
})
});
</script>
</body>
</html>
5、创建接口
![my_serializers.py创建目录](https://i-blog.csdnimg.cn/blog_migrate/e7e1bd83114bc6fba5410981850f057d.png)
from rest_framework import serializers
from app01 import models
class GoodsModelSerializer(serializers.ModelSerializer ):
"""序列类-> Goods表"""
class Meta:
model = models.Goods
fields = '__all__'
class Goods(View):
"""商品信息"""
def get(self, request):
goods_list = models.Goods.objects.all()
goods = []
for temp in goods_list:
goods.append({
'id': temp.id,
'name': temp.name,
})
data = {
'code': 200,
'message': goods,
}
return HttpResponse(json.dumps(data, ensure_ascii=False), content_type='application/json')
goods_list = models.Goods.objects.all()
s = my_serializers.GoodsModelSerializer(goods_list, many=True)
data = {
'code': 200,
'message': s.data,
}
return JsonResponse(data, safe=False)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="one">
+
<input type="text" id="two">
=
<input type="text" id="result">
<button onclick="jisuan()">计算</button>
<hr>
<div id="tb">
<button onclick="func()">添加数据</button>
</div>
</body>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script>
function jisuan() {
# 获取form表单字段中的 value 值
var one = $('#one').val();
var two = $('#two').val();
# 为form 表单字段的 value 重新赋值
var result = parseInt(one) + parseInt(two);
$('#result').val(result);
}
function func() {
$.ajax({
url: 'http://127.0.0.1:8000/goods/',
type: 'get',
success: function (response) {
console.log(response);
if (response.code == 200)
{
var content = '<table border="1">';
content += '<tr><td>ID</td><td>商品名称</td></tr>';
for (var i = 0; i<response.message.length; i++)
{
var temp = response.message[i];
content += '<tr>' +
'<td>'+temp.id+'</td>' +
'<td>'+temp.name+'</td>' +
'</tr>'
}
content += '</table>';
$('#tb').append(content)
}
else if (response.code == 201)
{
$('#tb').append('业务异常,没有获取到数据')
}
else if (response.code == 501)
{
$('#tb').append('未知错误')
}
},
errors: function (error) {
console.log(error)
}
})
}
</script>
</html>