- 浏览器地址栏，默认get请求
- form 表单
get请求
post请求- a标签
- ajax
1. 异步请求 AJAX 使用Javascript技术向服务器发送异步请求
2. 局部刷新 AJAX无需刷新整个页面
image
通过ajax发送数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<h2>this is index！</h2>
<button class="Ajax">Ajax</button>
<p class="content"></p>
<script
src="http://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
$(".Ajax").click(function () {
// 发送ajax请求
$.ajax({
url:"/test_ajax/", //请求url
type:"get", //请求方式get/post
data:{a:1,b:2},
success:function (data) { //回调函数
console.log(data);
$(".content").html(data);
}
})
})
</script>
</html
反馈数据给前端中的ajax中的data字段
创建视图函数
vews.py
from django.shortcuts import render, HttpResponse
def index(request):
return render(request, "index.html")
def test_ajax(request):
print(request.GET)
return HttpResponse('hello world')
绑定视图函数
url.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^test_ajax/', views.test_ajax),
]
未点击Ajax按钮的状态
image
点击Ajax按钮的状态
image
实现计算器效果
image
通过ajax发送请求,如果使用ajax发送请求到后端，请求数据是以键值对的方式发送给后端，并不需要在input标签中指定name属性，而如果是通过form表单进行发送，是需要指定的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" class="ret"><button class="cal">计算</button>
</body>
<script
src="http://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
//计算求值
$(".cal").click(function () {
$.ajax({
url: "/cal/",
type: "post",
//<input type="text" id="num1">+<input type="text" id="num2">
//不需要有name,只需要找到标签,通过id或class就行
//data 前端向后端发送的数据
data: {
n1:$("#num1").val(),
n2:$("#num2").val(),
},
//success 对后端给前端反馈的数据进行处理反馈到浏览器
success:function (data) {
$(".ret").val(data)
}
})
})
</script>
</html>
创建视图函数
from django.shortcuts import render, HttpResponse
def cal(request):
print(request.POST)
n1 = request.POST.get('n1')
n2 = request.POST.get('n2')
ret = int(n1) + int(n2)
return HttpResponse(ret)
绑定视图函数
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^test_ajax/', views.test_ajax),
url(r'^cal/', views.cal),
]
image
原因： 前端部分 在发送ajax请求时候未取到表单输入的值,找到标签后没有加 .val取值
data: {
n1:$("#num1"),
n2:$("#num2"),
},
# 正确写法：
data: {
n1:$("#num1").val(),
n2:$("#num2").val(),
},
image
原因：ajax没有接受后台传送的值
$(".cal").click(function () {
$.ajax({
type: 'post',
url: '/cal/',
data: {n1: $('.n1').val(), n2: $('.n2').val()},
success: function () {
$('.ret').val(data);
}
})
})
# 正确写法
$(".cal").click(function () {
$.ajax({
type: 'post',
url: '/cal/',
data: {n1: $('.n1').val(), n2: $('.n2').val()},
success: function (data) {
$('.ret').val(data);
}
})
})
原因: 视图函数未返回http协议的数据
def cal(request):
n1 = request.POST.get('n1')
n2 = request.POST.get('n2')
ret = int(n1) + int(n2)
return ret
# 正确写法
def cal(request):
n1 = request.POST.get('n1')
n2 = request.POST.get('n2')
ret = int(n1) + int(n2)
return HttpResponse(ret)
登录认证
基于ajax的登录认证
