1. 简单的加法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="a" id="a"><span>+</span><input type="text" name="b" id="b">
<button class="action">=</button>
<input type="text" name="sum" id="c">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".action").click(function () {
a = parseInt($("#a").val());
b = parseInt($("#b").val());
c=a+b;
$.ajax($("#c").val(c))
})
</script>
</body>
</html>
2. 用户登录验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="/get_OK/">点击</a><span class="error"></span>
<p>姓名：<input type="text" name="name"></p>
<p>密码：<input type="password" name="pwd"></p>
<span class="login_error"></span>
<p>
<button class="Ajax_send">Ajax_send</button>
</p>
<script src="/static/jquery-3.2.1.min.js"></script>
<script>
$(".Ajax_send").click(function () {
// ajax请求
$.ajax({
url: "/get_ajax/",
type: 'GET',
data: JSON.stringify({
name: $(":text").val(),
pwd: $(":password").val()
}),
contentType:"application/json",
success: function (data) {
console.log(data);
var data=JSON.parse(data);
if(!data){
$(".login_error").html('用户名或密码错误');
}
}
})
})
</script>
</body>
</html>
3. 视图函数
import json
from django.shortcuts import render,redirect,HttpResponse
# Create your views here.
def index(request):
return render(request,'index.html')
def get_OK(request):
return render(request,'get_OK.html')
def get_ajax(request):
username=request.GET.get('name')
password=request.GET.get('pwd')
flag=False
if username=="yuan" and password =='123':
flag =True
return HttpResponse(json.dumps(flag))
3. 参数说明：
######################------------data---------################
data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式
(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。
function testData() {
$.ajax("/test",{ //此时的data是一个json形式的对象
data:{
a:1,
b:2
}
}); //?a=1&b=2
######################------------processData---------################
processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，
那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()
,最后得到一个［object，Object］形式的结果。
######################------------contentType---------################
contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，
比如contentType:"application/json"，即向服务器发送一个json字符串：
$.ajax("/ajax_get",{
data:JSON.stringify({
a:22,
b:33
}),
contentType:"application/json",
type:"POST",
}); //{a: 22, b: 33}
注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象
######################------------traditional---------################
traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
traditional为false会对数据进行深层次迭代；
待续.. ...