Ajax准备知识：json
什么是json？
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
3
1
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
2
它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
3
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
讲json对象，不得不提到JS对象：
json：数据交换格式
json是JS的子集
json只认双引号
json一定是一个字符串
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"}
4
1
["one", "two", "three"]
2
{ "one": 1, "two": 2, "three": 3 }
3
{"names": ["张三", "李四"] }
4
[ { "name": "张三"}, {"name": "李四"}
json字符串需要注意的
属性名必须是双引号
不能使用十六进制数
不能使用undefined
不能使用函数和日期对象
5
1
属性名必须是双引号
2
不能使用十六进制数
3
不能使用undefined
4
不能使用函数和日期对象
5
stringify与parse方法
在html前端页面中可以使用
1.JSON.stringify()
JSON.stringify() #将用于将JavaScript值转换为JSON字符串
var data=JSON.stringify('{name:"Yang"}')
2
1
JSON.stringify() #将用于将JavaScript值转换为JSON字符串
2
var data=JSON.stringify('{name:"Yang"}')
2.JSON.parse()
JSON.parse() #将用于将JSON字符串转换为JavaScript对象
var data=JSON.parse('{"name":"Yang"}')
2
1
JSON.parse() #将用于将JSON字符串转换为JavaScript对象
2
var data=JSON.parse('{"name":"Yang"}')
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var date=JSON.stringify('{name:"Yang"}'); #序列化
console.log(date);
console.log(typeof date); #string json字符串
var date1=JSON.parse('{"name":"Yang"}'); #反序列化
console.log(date1);
console.log(typeof date1) #object json对象
</script>
</head>
<body>
</body>
</html>
18
1
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Title</title>
6
<script>
7
var date=JSON.stringify('{name:"Yang"}'); #序列化
8
console.log(date);
9
console.log(typeof date); #string json字符串
10
var date1=JSON.parse('{"name":"Yang"}'); #反序列化
11
console.log(date1);
12
console.log(typeof date1) #object json对象
13
</script>
14
</head>
15
<body>
16
17
</body>
18
</html>
输出结果：
AJAX和XML的区别
JSON格式是于2001年由Douglas Crockford提出，目的就是取代繁琐笨重的XML格式。
JSON格式有两个显著的有点：书写简单，一目了然；符合JavaScript原生语法，可以由解释引擎直接处理，不用另外添加解析代码，所以JSON迅速被接受，已经成为各大网站交互数据的标准格式，并被写如ECMAScript5，成为标准的一部分。
XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较
用XML表示中国部分省市数据：
<?xml version="1.0" encoding="utf-8"?>
<country>
<name>中国</name>
<province>
<name>黑龙江</name>
<cities>
<city>哈尔滨</city>
<city>大庆</city>
</cities>
</province>
<province>
<name>广东</name>
<cities>
<city>广州</city>
<city>深圳</city>
<city>珠海</city>
</cities>
</province>
<province>
<name>台湾</name>
<cities>
<city>台北</city>
<city>高雄</city>
</cities>
</province>
<province>
<name>新疆</name>
<cities>
<city>乌鲁木齐</city>
</cities>
</province>
</country>
32
1
2
<country>
3
<name>中国</name>
4
<province>
5
<name>黑龙江</name>
6
<cities>
7
<city>哈尔滨</city>
8
<city>大庆</city>
9
</cities>
10
</province>
11
<province>
12
<name>广东</name>
13
<cities>
14
<city>广州</city>
15
<city>深圳</city>
16
<city>珠海</city>
17
</cities>
18
</province>
19
<province>
20
<name>台湾</name>
21
<cities>
22
<city>台北</city>
23
<city>高雄</city>
24
</cities>
25
</province>
26
<province>
27
<name>新疆</name>
28
<cities>
29
<city>乌鲁木齐</city>
30
</cities>
31
</province>
32
</country>
用JSON表示如下：
{
"name": "中国",
"province": [{
"name": "黑龙江",
"cities": {
"city": ["哈尔滨", "大庆"]
}
}, {
"name": "广东",
"cities": {
"city": ["广州", "深圳", "珠海"]
}
}, {
"name": "台湾",
"cities": {
"city": ["台北", "高雄"]
}
}, {
"name": "新疆",
"cities": {
"city": ["乌鲁木齐"]
}
}]
}
24
1
{
2
"name": "中国",
3
"province": [{
4
"name": "黑龙江",
5
"cities": {
6
"city": ["哈尔滨", "大庆"]
7
}
8
}, {
9
"name": "广东",
10
"cities": {
11
"city": ["广州", "深圳", "珠海"]
12
}
13
}, {
14
"name": "台湾",
15
"cities": {
16
"city": ["台北", "高雄"]
17
}
18
}, {
19
"name": "新疆",
20
"cities": {
21
"city": ["乌鲁木齐"]
22
}
23
}]
24
}
可以看到，JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽
注意：
JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。
但是国人的一款在线工具 BeJson 、SoJson在线工具让众多程序员、新接触JSON格式的程序员更快的了解JSON的结构，更快的精确定位JSON格式错误。
Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
ajax实现的局部刷新<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color:red
}
</style>
</head>
<body>
<form class="Form">
<p>姓名 <input class="v1" type="text" name="username" mark="用户名"></p>
<p>密码 <input class="v1" type="text" name="email" mark="邮箱"></p>
<p><input type="submit" value="submit"></p>
</form>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".Form :submit").click(function(){
flag=true;
$("Form .v1").each(function(){
var value=$(this).val();
if (value.trim().length==0){
var mark=$(this).attr("mark");
var $span=$("<span>");
$span.html(mark+"不能为空!");
$span.prop("class","error");
$(this).after($span);
setTimeout(function(){
$span.remove();
},800);
flag=false;
return flag;
}
});
return flag
});
</script>
</body>
</html>
49
1
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Title</title>
6
7
<style>
8
.error{
9
color:red
10
}
11
</style>
12
</head>
13
<body>
14
15
16
<form class="Form">
17
18
<p>姓名 <input class="v1" type="text" name="username" mark="用户名"></p>
19
<p>密码 <input class="v1" type="text" name="email" mark="邮箱"></p>
20
<p><input type="submit" value="submit"></p>
21
22
</form>
23
24
<script src="jquery-3.2.1.min.js"></script>
25
26
<script>
27
$(".Form :submit").click(function(){
28
flag=true;
29
$("Form .v1").each(function(){
30
var value=$(this).val();
31
if (value.trim().length==0){
32
var mark=$(this).attr("mark");
33
var $span=$("<span>");
34
$span.html(mark+"不能为空!");
35
$span.prop("class","error");
36
$(this).after($span);
37
38
setTimeout(function(){
39
$span.remove();
40
},800);
41
flag=false;
42
return flag;
43
}
44
});
45
return flag
46
});
47
</script>
48
</body>
49
</html>
AJAX常见应用情景
当我们在百度中输入一个“老”字后，会马上出现一个下拉列表！列表中显示的是包含“传”字的4个关键字。
其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这4个关键字显示在下拉列表中。
- 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
- 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！
- 整个过程中页面没有刷新，只是局部刷新了；
- 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；
AJAX的优缺点
优点：
- AJAX使用Javascript技术向服务器发送异步请求；
- AJAX无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
jquery实现的ajax
jquery实现的Ajax
$.ajax({
url: "" ,// 请求路径
type:"" ,// 请求方式
success：function(data){
}
})
参数：
data：{"name":"yuan"}
if processData=false：不对数据做预处理，不涉及编码类型
if processData=true：
设计编码类型：
contentType：默认值: "application/x-www-form-urlencoded"
19
1
jquery实现的Ajax
2
3
$.ajax({
4
url: "" ,// 请求路径
5
type:"" ,// 请求方式
6
success：function(data){
7
8
}
9
10
})
11
12
13
参数：
14
data：{"name":"yuan"}
15
if processData=false：不对数据做预处理，不涉及编码类型
16
if processData=true：
17
设计编码类型：
18
contentType：默认值: "application/x-www-form-urlencoded"
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<a href="/get_OK/">点击</a><span class="error"></span>
<hr>
<p>姓名<input type="text"></p>
<p>密码<input type="password"></p>
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
$(".Ajax_send").click(function () {
// ajax请求
$.ajax({
url:"/get_ajax/",
type:"GET",
data:JSON.stringify({ // 接受用户的数据进行序列化
name:$(":text").val(),
pwd:$(":password").val()
}), // 请求数据 ，是js数据 ?name=yuan&pwd=123
contentType:"application/json",
success:function (data) { // success是返回的
var data=JSON.parse(data); // 进行反序列化JSON.parse(data)
console.log(data);
console.log(typeof data);
// $(".error").html(data)
if(!data["flag"]){
$(".login_error").html("用户名或者密码错误")
}
}
})
})
</script>
</body>
</html>
#================================================vivews
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
# import time
# time.sleep(10)
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")
print(username,password)
response={"flag":False}
if username=="yuan" and password=="123":
response["flag"]=True
import json
import time
# time.sleep(10)
return HttpResponse(json.dumps(response))
84
1
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width, initial-scale=1">
7
<title>Title</title>
8
</head>
9
<body>
10
11
<a href="/get_OK/">点击</a><span class="error"></span>
12
<hr>
13
<p>姓名<input type="text"></p>
14
<p>密码<input type="password"></p>
15
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>
16
17
18
19
20
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
21
<script>
22
$(".Ajax_send").click(function () {
23
// ajax请求
24
25
$.ajax({
26
url:"/get_ajax/",
27
type:"GET",
28
data:JSON.stringify({ // 接受用户的数据进行序列化
29
name:$(":text").val(),
30
pwd:$(":password").val()
31
}), // 请求数据 ，是js数据 ?name=yuan&pwd=123
32
contentType:"application/json",
33
success:function (data) { // success是返回的
34
var data=JSON.parse(data); // 进行反序列化JSON.parse(data)
35
console.log(data);
36
console.log(typeof data);
37
// $(".error").html(data)
38
39
if(!data["flag"]){
40
$(".login_error").html("用户名或者密码错误")
41
}
42
43
44
}
45
})
46
47
48
49
})
50
</script>
51
</body>
52
</html>
53
54
55
56
#================================================vivews
57
from django.shortcuts import render,HttpResponse
58
59
# Create your views here.
60
61
62
def index(request):
63
# import time
64
# time.sleep(10)
65
return render(request,"index.html")
66
67
def get_OK(request):
68
return render(request,"get_OK.html")
69
70
def get_ajax(request):
71
72
username=request.GET.get("name")
73
password=request.GET.get("pwd")
74
print(username,password)
75
76
response={"flag":False}
77
if username=="yuan" and password=="123":
78
response["flag"]=True
79
import json
80
import time
81
82
# time.sleep(10)
83
return HttpResponse(json.dumps(response))
84
进行预编译
$.ajax参数
1. url:"/get_ajax/", #当触发事件是要跳转的页面
2. type:"GET", #指定用什么方式发送数据
3. data:JSON.stringify({ #当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。 // 接受用户的数据进行序列化
name:$(":text").val(),
pwd:$(":password").val()
}), // 请求数据 ，是js数据 ?name=yuan&pwd=123
4. contentType:"application/json", #默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，比如contentType:"application/json"，即向服务器发送一个json字符串：
5. success:function (data) { } #用于接收服务端返回的数据
6.processData：
#声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString(),最后得到一个［object，Object］形式的结果。
7.traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
traditional为false会对数据进行深层次迭代；
13
1
1. url:"/get_ajax/", #当触发事件是要跳转的页面
2
2. type:"GET", #指定用什么方式发送数据
3
3. data:JSON.stringify({ #当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。 // 接受用户的数据进行序列化
4
name:$(":text").val(),
5
pwd:$(":password").val()
6
}), // 请求数据 ，是js数据 ?name=yuan&pwd=123
7
4. contentType:"application/json", #默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，比如contentType:"application/json"，即向服务器发送一个json字符串：
8
5. success:function (data) { } #用于接收服务端返回的数据
9
10
6.processData：
11
#声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString(),最后得到一个［object，Object］形式的结果。
12
7.traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
13
traditional为false会对数据进行深层次迭代；
csrf跨站请求伪造
当使用post请求发送数据时，会被Forbidden掉
要通过csrf_toke进行给服务器一个随机验证码，只有通过这个随机验证码才能post请求。
方式1
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
3
1
$.ajaxSetup({
2
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
3
});
示例：
<script>
$(".btn-danger").click(function () {
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
// ajax请求
$.post({
url:"/delbook/",
data:{
val:$('#data').text()
},
success:function (data) {
if (data){
$('#del').parent().parent().remove();
alert('成功')
}
}
})
})
</script>
22
1
<script>
2
$(".btn-danger").click(function () {
3
$.ajaxSetup({
4
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
5
});
6
// ajax请求
7
$.post({
8
9
url:"/delbook/",
10
data:{
11
val:$('#data').text()
12
},
13
success:function (data) {
14
if (data){
15
$('#del').parent().parent().remove();
16
alert('成功')
17
}
18
}
19
20
})
21
})
22
</script>
方式一虽然可以做到，但是有局限性，要js和html页面要写在一起，然后{{ csrf_token }}才能通过模板语法来渲染出来，一旦js和html页面分开写的话就不能通过模板来渲染出来了，就会出错
方式2
既然方式一有局限性不能分文件来运行，既然crsf_tornk是给服务器发一个随机验证码，那么何不自己定制一个呢
/**
* Created by root on 2017/11/14.
*/
$(".btn-danger").click(function () {
// ajax请求
$.post({
url:"/delbook/",
data:{
val:$('#data').text(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() #在html中通过csrf来后面是一个随机验证码，通过data来发送给服务器
},
success:function (data) {
if (data){
$('#del').parent().parent().remove();
alert('成功')
}
}
})
});
23
1
/**
2
* Created by root on 2017/11/14.
3
*/
4
5
6
$(".btn-danger").click(function () {
7
8
// ajax请求
9
$.post({
10
url:"/delbook/",
11
data:{
12
val:$('#data').text(),
13
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() #在html中通过csrf来后面是一个随机验证码，通过data来发送给服务器
14
},
15
success:function (data) {
16
if (data){
17
$('#del').parent().parent().remove();
18
alert('成功')
19
}
20
}
21
})
22
});
23
方式3：
通过导入文件来进行验证，通过cookie发送给服务器
<script src="{% static 'js/jquery.cookie.js' %}"></script>
$.ajax({
url:"/get_ajax/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data:{
name:$(":text").val(),
pwd:$(":password").val(),
}, // 请求数据 ，是js数据 ?name=yuan&pwd=123
x
1
<script src="{% static 'js/jquery.cookie.js' %}"></script>
2
3
$.ajax({
4
url:"/get_ajax/",
5
type:"POST",
6
headers:{"X-CSRFToken":$.cookie('csrftoken')},
7
data:{
8
name:$(":text").val(),
9
pwd:$(":password").val(),
10
}, // 请求数据 ，是js数据 ?name=yuan&pwd=123
11
jQuery.serialize()
serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。
serialize()函数常用于将表单内容序列化，以便用于AJAX提交。
该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。
该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交
当input框过多时，通过ajax发送的话键值对要自己写太多了，是不是很麻烦。
语法
1
jQueryObject.serialize( )
1
1
2
jQueryObject.serialize( )
返回值
serialize()
函数的返回值为
String类型，返回将表单元素编码后的可用于表单提交的文本字符串。
示例：
上传文件
form表单上传文件
def upload(request):
if request.method=="POST":
print(request.POST) #post请求拿不到具体的数据，只能拿到图片的名字
f_obj=request.FILES.get("upload_file_form") #通过FILES.get拿到input框中的文件的name，然后获得一个文件句柄
# s=open()
print(f_obj.name)
with open(f_obj.name,"wb") as s: #二进制读取
for i in f_obj:
print(i)
s.write(i) #然后把内容保存进去
return render(request,"uploading.html")
#==============================================前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/upload/" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p><input type="file" name="upload_file_form"></p>
<input type="submit">
</form>
</body>
</html>
#然后把内容保存进去
1
13
1
2
def upload(request):
3
if request.method=="POST":
4
print(request.POST) #post请求拿不到具体的数据，只能拿到图片的名字
5
f_obj=request.FILES.get("upload_file_form") #通过FILES.get拿到input框中的文件的name，然后获得一个文件句柄
6
# s=open()
7
print(f_obj.name)
8
with open(f_obj.name,"wb") as s: #二进制读取
9
for i in f_obj:
10
print(i)
11
s.write(i) #然后把内容保存进去
12
13
return render(request,"uploading.html")
14
15
16
17
18
#==============================================前端页面
19
<!DOCTYPE html>
20
<html lang="en">
21
<head>
22
<meta charset="UTF-8">
23
<title>Title</title>
24
</head>
25
<body>
26
<form action="/upload/" method="post" enctype="multipart/form-data">
27
{% csrf_token %}
28
<p><input type="file" name="upload_file_form"></p>
29
<input type="submit">
30
</form>
31
</body>
32
</html>
输出结果：当我上传一张图片时，要进行二进制存储，不指定存储路径的话，会放在默认的django路径中
Ajax(FormData)
FormData是什么呢？
XMLHttpRequest Level 2添加了一个新的接口
FormData.利用
FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的
send()方法来异步的提交这个"表单".比起普通的ajax,使用
FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
<form action="" id="s1">
<p>姓名<input type="text"></p>
<p>密码<input type="password"></p>
<p>头像<input type="file" id="upload_avatar"></p>
</form>
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
function foo() {
$(".login_error").html("")
}
$(".Ajax_send").click(function () {
var formData=new FormData();
formData.append("username",$(":text").val());
formData.append("password",$(":password").val());
formData.append("avatar",$("#upload_avatar")[0].files[0]); #找到这个input框中上传的二进制文件只能上传一个
// ajax请求
$.ajax({
url:"/delbook/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data:formData,
contentType:false,
processData:false,
success:function (data) {
var data=JSON.parse(data);
console.log(data);
console.log(typeof data);
// $(".error").html(data)
if(!data["flag"]){
$(".login_error").html("用户名或者密码错误")
setTimeout(foo,3000)
}
}
})
</script>
</body>
</html>
#找到这个input框中上传的二进制文件只能上传一个
1
55
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Title</title>
6
</head>
7
<body>
8
{% csrf_token %}
9
10
11
12
<form action="" id="s1">
13
<p>姓名<input type="text"></p>
14
<p>密码<input type="password"></p>
15
<p>头像<input type="file" id="upload_avatar"></p>
16
</form>
17
18
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>
19
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
20
<script>
21
function foo() {
22
$(".login_error").html("")
23
}
24
$(".Ajax_send").click(function () {
25
26
var formData=new FormData();
27
formData.append("username",$(":text").val());
28
formData.append("password",$(":password").val());
29
formData.append("avatar",$("#upload_avatar")[0].files[0]); #找到这个input框中上传的二进制文件只能上传一个
30
// ajax请求
31
$.ajax({
32
url:"/delbook/",
33
type:"POST",
34
headers:{"X-CSRFToken":$.cookie('csrftoken')},
35
data:formData,
36
contentType:false,
37
processData:false,
38
success:function (data) {
39
var data=JSON.parse(data);
40
console.log(data);
41
console.log(typeof data);
42
// $(".error").html(data)
43
44
if(!data["flag"]){
45
$(".login_error").html("用户名或者密码错误")
46
setTimeout(foo,3000)
47
}
48
49
50
}
51
})
52
53
</script>
54
</body>
55
</html>
扫一扫
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
