手臂数据asenoneexttps-Ajax投资
翻译成中文的AJAX(异步Java语言和XML)是“异步Java语言XML”。也就是说,使用Javascript语言与服务器进行异步交互?传输的数据是XML(当然,传输的数据不仅是XML,现在使用了更多的json数据)。
同步交互。在将请求发送给客户之后,必须等待服务器响应,然后服务器才能发送第二个请求。
异步交互。客户端提交请求后,它可以发出第二个请求,而无需等待服务器响应。
除了AJAX的异步功能外,还有一个功能:浏览器页面的部分更新; (此功能使用户感到自己在不知不觉中完成了查询和回答过程。)
优势优势
AJAX使用Javascript技术将异步请求发送到服务器
AJAX不需要更新整个页面
两个AJAX异步查询
设计方向:
从django.contrib导入管理员
从django.urls的导入路径
从app01导入视图
urlpatterns = [
路径(最小admin /‘,admin.site.urls),
路径(“ add_book /”,views.add_book),
路径(“ query_book /”,views.query_book),
#ajax
路径(“ ajax_sleep /”,views.ajax_sleep),
路径(“ ajax_test /”,views.ajax_test),
#首页
路径(“ ajax_temp /”,views.ajax_temp),
]
查看文件
def ajax_sleep
导入时间
睡眠时间(3)
返回到HttpResponse(“睡眠3 senon”)
def ajax_test(查询):
返回到HttpResponse(“测试...”)
def ajax_temp(查询):
退货服务(查询:“ ajax_temp.html”)
html文件:
[受邮件保护]。 ?/ PycharmProjects / orm_demo#vim雪模式/ ajax_temp.html
\\ ult DOCTYPE HTML \\
\\ ltlt; html lang =“ zh-CN” \\ u>
\\ ltlt;头>>
\\ ltlt;元字符集=“ UTF-8” \\
标题\\标题\\ /标题
\\ ltlt; /头>
\\ ltlt;车身>>
\\ ltlt;按钮ID =“ btn1” \\ ajax_sleep \\ ult26 lt; /按钮
\\ ltlt;按钮ID =“ btn2” \\ ajax_test \\ /按钮
\\ ltlt;脚本src =“ https://cdn.bootcss.com/jquery/3.4.1/jquery.js” \\ u0026 gt; \\ ltlt; /脚本>
\\ ltlt;脚本\\
$(“#btn1”):点击(功能(){
$ .ajax(。
网址: “ / ajax_sleep /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
$(“#btn2”):点击(功能(){
$ .ajax(。
网址: “ / ajax_test /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
\\ ltlt; /脚本> \\ gt;
\\ ltlt; /身体>
\\ ltlt; / html \\
访问http://127.0.0.1:8000/ajax_temp/,首先单击ajax_sleep,然后进行测试。
三种“ Aax”计算的情况
创建以下页面,当您在前面输入两个数字并单击“发送”以触发时,结果将填充在第三个框中。
设计方向:
从django.contrib导入管理员
从django.urls的导入路径
从app01导入视图
urlpatterns = [
路径(最小admin /‘,admin.site.urls),
路径(“ add_book /”,views.add_book),
路径(“ query_book /”,views.query_book),
#ajax
路径(“ ajax_sleep /”,views.ajax_sleep),
路径(“ ajax_test /”,views.ajax_test),
#首页
路径(“ ajax_temp /”,views.ajax_temp),
#ajaxsummation:
路径(“ ajax_sum /”,views.ajax_sum),
]
看一下
def ajax_sum(查询):
如果query.is_ajax():
num1 = query.POST.get(“ num1”)
num2 = query.POST.get(“ num2”)
总计= int(num1)+ int(num2)
返回HttpResponse(总计)
的HTML:
\\ ult DOCTYPE HTML \\
\\ ltlt; html lang =“ zh-CN” \\ u>
\\ ltlt;头>>
\\ ltlt;元字符集=“ UTF-8” \\
标题\\标题\\ /标题
\\ ltlt; /头>
\\ ltlt;按钮ID =“ btn1” \\ ajax_sleep \\ ult26 lt; /按钮
\\ ltlt;按钮ID =“ btn2” \\ ajax_test \\ /按钮
:u0026 \\ u0026:
\\ ltlt; div \\
\\ ltlt;输入类型=“文本” id =“ i1” \\ + \\ ult26 lt;输入类型=“文本” id =“ i2” \\ =:
\\ ltlt;输入提示=“文本” ID =“ i3” \\ \\ ltlt;按钮ID =“ btn3” \\计算\\ /按钮
\\ ltlt; / div \\
\\ ltlt;脚本src =“ https://cdn.bootcss.com/jquery/3.4.1/jquery.js” \\ u0026 gt; \\ ltlt; /脚本>
\\ ltlt;脚本\\
$(“#btn1”):点击(功能(){
$ .ajax(。
网址: “ / ajax_sleep /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
$(“#btn2”):点击(功能(){
$ .ajax(。
网址: “ / ajax_test /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
#计算案例#}
$(‘#Btn3’):点击(功能())
var num1 = $(“#i1”)。 val();
var num2 = $(“#i2”)。 val();
$ .ajax(。
网址: “ / ajax_sum /”,
类型:“ POST”
资料
num1: num1,
num2: num2,
,
祝你好运函数(数据){
$(“#i3”)。 val(数据);
}
})
})
\\ ltlt; /脚本>
\\ ltlt; /身体>
\\ ltlt; / html \\
前往http://127.0.0.1:8000/ajax_temp/
403错误
这是由于扣,添加扣
编辑HTML:
\\ ult DOCTYPE HTML \\
\\ ltlt; html lang =“ zh-CN” \\ u>
\\ ltlt;头>>
\\ ltlt;元字符集=“ UTF-8” \\
标题\\标题\\ /标题
\\ ltlt; /头>
\\ ltlt;按钮ID =“ btn1” \\ ajax_sleep \\ ult26 lt; /按钮
\\ ltlt;按钮ID =“ btn2” \\ ajax_test \\ /按钮
%csrf_token%
:u0026 \\ u0026:
\\ ltlt; div \\
\\ ltlt;输入类型=“文本” id =“ i1” \\ + \\ ult26 lt;输入类型=“文本” id =“ i2” \\ =:
\\ ltlt;输入提示=“文本” ID =“ i3” \\ \\ ltlt;按钮ID =“ btn3” \\计算\\ /按钮
\\ ltlt; / div \\
\\ ltlt;脚本src =“ https://cdn.bootcss.com/jquery/3.4.1/jquery.js” \\ u0026 gt; \\ ltlt; /脚本>
\\ ltlt;脚本\\
#计算案例#}
$(‘#Btn3’):点击(功能())
var num1 = $(“#i1”)。 val();
var num2 = $(“#i2”)。 val();
$ .ajax(。
网址: “ / ajax_sum /”,
类型:“ POST”
资料
num1: num1,
num2: num2,
csrfmiddlewaretoken: $(“ [[[name = csrfmiddlewaretoken]”))。 val(),
,
祝你好运函数(数据){
$(“#i3”)。 val(数据);
}
})
})
\\ ltlt; /脚本>
\\ ltlt; /身体>
\\ ltlt; / html \\
重新访问并输入计算值,单击“计算”
Ajax查询流程
输入非数字计算时
状态信息:
文件“ /root/PycharmProjects/orm_demo/app01/views.py”,行131,在ajax_sum中
总计= int(num1)+ int(num2)
ValueError:对于int()的第10个基数,从字面上来看无效。 “ qq”
[08/2020年4月/ 03:48:19]“ POST / ajax_sum / HTTP / 1.1” 500 14677
查看档案
从django.shortcuts的介绍中,HttpResponse
从app01导入模型
由JsonResponse从django.http导入
def ajax_sum(查询):
如果query.is_ajax():
num1 = query.POST.get(“ num1”)
num2 = query.POST.get(“ num2”)
ret = {“状态”: 1,“ msgstr”无}
试一试
总计= int(num1)+ int(num2)
ret [“ msg”“] =普通
e除外。
ret [‘status‘] = 0:
ret [“ msg”“ =”请输入数字“
#您需要使用数据结构,将其移动到json,首先输入jsonhttponse
返回JsonResponse(ret)
html调整
\\ ult DOCTYPE HTML \\
\\ ltlt; html lang =“ zh-CN” \\ u>
\\ ltlt;头>>
\\ ltlt;元字符集=“ UTF-8” \\
标题\\标题\\ /标题
\\ ltlt; /头>
\\ ltlt;按钮ID =“ btn1” \\ ajax_sleep \\ ult26 lt; /按钮
\\ ltlt;按钮ID =“ btn2” \\ ajax_test \\ /按钮
%csrf_token%
:u0026 \\ u0026:
\\ ltlt; div \\
\\ ltlt;输入类型=“文本” id =“ i1” \\ + \\ ult26 lt;输入类型=“文本” id =“ i2” \\ =:
\\ ltlt;输入类型=“文本” id =“ i3” \\ \\ ltlt;按钮ID =“ btn3” \\计算\\ /按钮\\ ltlt;跨度ID =“ s1” \\ \\ ltlt; /跨度sp#添加另一个span标签#)
\\ ltlt; / div \\
\\ ltlt;脚本src =“ https://cdn.bootcss.com/jquery/3.4.1/jquery.js” \\ u0026 gt; \\ ltlt; /脚本>
\\ ltlt;脚本\\
#计算案例#}
$(‘#Btn3’):点击(功能())
var num1 = $(“#i1”)。 val();
var num2 = $(“#i2”)。 val();
$ .ajax(。
网址: “ / ajax_sum /”,
类型:“ POST”
资料
num1: num1,
num2: num2,
csrfmiddlewaretoken: $(“ [[[name = csrfmiddlewaretoken]”))。 val(),
},{#传输的默认值是1,输入已输入的msg值。当状态值为0时,将显示自定义提示,该提示将显示查看文件#
祝你好运函数(数据){
如果(data.status){
$(“#i3”)。 val(data.msg);
和不同
$(“#s1”)。文字(data.msg);
}
}
})
})
\\ ltlt; /脚本>
\\ ltlt; /身体>
\\ ltlt; / html \\
当您不输入数字时,会出现提示
问题:当您再次输入正确的格式时,提示将不会很小。
用于溶解计时器,2秒后消失
\\ ult DOCTYPE HTML \\
\\ ltlt; html lang =“ zh-CN” \\ u>
\\ ltlt;头>>
\\ ltlt;元字符集=“ UTF-8” \\
标题\\标题\\ /标题
\\ ltlt; /头>
\\ ltlt;按钮ID =“ btn1” \\ ajax_sleep \\ ult26 lt; /按钮
\\ ltlt;按钮ID =“ btn2” \\ ajax_test \\ /按钮
%csrf_token%
:u0026 \\ u0026:
\\ ltlt; div \\
\\ ltlt;输入类型=“文本” id =“ i1” \\ + \\ ult26 lt;输入类型=“文本” id =“ i2” \\ =:
\\ ltlt;输入提示=“文本” ID =“ i3” \\ \\ ltlt;按钮ID =“ btn3” \\计算\\ /按钮\\ ltlt;跨度ID =“ s1” \\ \\ ltlt; /跨度
\\ ltlt; / div \\
\\ ltlt;脚本src =“ https://cdn.bootcss.com/jquery/3.4.1/jquery.js” \\ u0026 gt; \\ ltlt; /脚本>
\\ ltlt;脚本\\
#计算案例#}
$(‘#Btn3’):点击(功能())
var num1 = $(“#i1”)。 val();
var num2 = $(“#i2”)。 val();
$ .ajax(。
网址: “ / ajax_sum /”,
类型:“ POST”
资料
num1: num1,
num2: num2,
csrfmiddlewaretoken: $(“ [[[name = csrfmiddlewaretoken]”))。 val(),
,
祝你好运函数(数据){
如果(data.status){
$(“#i3”)。 val(data.msg);
和不同
$(“#s1”)。文字(data.msg);
setTimeout(函数())
$(“#s1”)。文字(“”);
},2000年)
}
}
})
})
\\ ltlt; /脚本>
\\ ltlt; /身体>
\\ ltlt; / html \\
访问后输入一个值,两秒钟后消失
根据Ajax上传四个json数据
网址设计
从django.contrib导入管理员
从django.urls的导入路径
从app01导入视图
urlpatterns = [
路径(最小admin /‘,admin.site.urls),
路径(“ add_book /”,views.add_book),
路径(“ query_book /”,views.query_book),
#ajax
路径(“ ajax_sleep /”,views.ajax_sleep),
路径(“ ajax_test /”,views.ajax_test),
#首页
路径(“ ajax_temp /”,views.ajax_temp),
#ajaxsummation:
路径(“ ajax_sum /”,views.ajax_sum),
#ajax下载json数据
路径(“ ajax_json /”,views.ajax_json),
]
查看文件
当评论被回答时,它必须是HttpResponse或HttpResponse,而不是提交或预测
def ajax_json(查询):
导入json
打印(survey.POST)
打印(survey.one)
数据= json.loads(request.body.decode())
打印(数据)
返回HttpResponse(“好”)
html文件:
\\ ult DOCTYPE HTML \\
\\ ltlt; html lang =“ zh-CN” \\ u>
\\ ltlt;头>>
\\ ltlt;元字符集=“ UTF-8” \\
标题\\标题\\ /标题
\\ ltlt; /头>
\\ ltlt;按钮ID =“ btn1” \\ ajax_sleep \\ ult26 lt; /按钮
\\ ltlt;按钮ID =“ btn2” \\ ajax_test \\ /按钮
\\ ltlt;按钮ID =“ btn4” \\上传json数据\\ /按钮
%csrf_token%
:u0026 \\ u0026:
\\ ltlt; div \\
\\ ltlt;输入类型=“文本” id =“ i1” \\ + \\ ult26 lt;输入类型=“文本” id =“ i2” \\ =:
\\ ltlt;输入提示=“文本” ID =“ i3” \\ \\ ltlt;按钮ID =“ btn3” \\计算\\ /按钮\\ ltlt;跨度ID =“ s1” \\ \\ ltlt; /跨度
\\ ltlt; / div \\
\\ ltlt;脚本src =“ https://cdn.bootcss.com/jquery/3.4.1/jquery.js” \\ u0026 gt; \\ ltlt; /脚本>
\\ ltlt;脚本\\
#assinchron案例#}
$(“#btn1”):点击(功能(){
$ .ajax(。
网址: “ / ajax_sleep /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
$(“#btn2”):点击(功能(){
$ .ajax(。
网址: “ / ajax_test /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
#计算案例#}
$(‘#Btn3’):点击(功能())
var num1 = $(“#i1”)。 val();
var num2 = $(“#i2”)。 val();
$ .ajax(。
网址: “ / ajax_sum /”,
类型:“ POST”
资料
num1: num1,
num2: num2,
csrfmiddlewaretoken: $(“ [[[name = csrfmiddlewaretoken]”))。 val(),
,
祝你好运函数(数据){
如果(data.status){
$(“#i3”)。 val(data.msg);
和不同
$(“#s1”)。文字(data.msg);
setTimeout(函数())
$(“#s1”)。文字(“”);
},2000年)
}
}
})
});
$(“#btn4”):点击(功能(){
$ .ajax(。
网址: “ / ajax_json /”,
类型:“ POST”
内容类型:“ json”,
头衔{“ X-CSRFToken”: $(“ [name =‘csrfmiddlewarewaretoken’]”)。 val()},//将csrf添加到查询的标题
数据:JSON.stringify({
一个100,
b。 200,
用户:“ darren”,
}),
祝你好运函数(数据){
console.log(数据)
}
})
})
\\ ltlt; /脚本>
\\ ltlt; /身体>
\\ ltlt; / html \\
登录提交JSON数据
得到结果
状态退出
\\ ltlt; QueryDict。 {} 00 ugt26;
b’{“ a”: 100,“ b”。 200,“ user”:“ darren”}‘
{‘A’: 100,‘b’。 200,“用户”: ‘达伦}
当使用视图文件还原HttpResponse时,前面的代码在使用时必须使用json数据,?必须使用JSON来稳定它。parse(data)}}`
如果使用JsonResponse(ret)返回,则可以直接使用它,例如,钱箱。
根据论文上传五个文件
将图像复制到桌面副本test111.png
网址档案:
从django.contrib导入管理员
从django.urls的导入路径
从app01导入视图
urlpatterns = [
路径(最小admin /‘,admin.site.urls),
路径(“ add_book /”,views.add_book),
路径(“ query_book /”,views.query_book),
#ajax
路径(“ ajax_sleep /”,views.ajax_sleep),
路径(“ ajax_test /”,views.ajax_test),
#首页
路径(“ ajax_temp /”,views.ajax_temp),
#ajaxsummation:
路径(“ ajax_sum /”,views.ajax_sum),
#ajax下载json数据
路径(“ ajax_json /”,views.ajax_json),
#form表格上传
路径(“上传/”、views.upload),
]
意见:
导入操作系统
def上传
如果survey.method ==“ POST”。
打印(survey.POST)
打印(query.FILL)
#print(request.body)错误:
file_obj =查询。FILES.get(“ file_name”)
名称= file_obj.name:
用f打开(os.path.join(“ media”,name),“ wb”)。
对于我在file_obj中:
f。写(i)
返回到HttpResponse(“上传成功”)
html写信给你
\\ ult DOCTYPE HTML \\
\\ ltlt; html lang =“ zh-CN” \\ u>
\\ ltlt;头>>
\\ ltlt;元字符集=“ UTF-8” \\
标题\\标题\\ /标题
\\ ltlt; /头>
\\ ltlt;按钮ID =“ btn1” \\ ajax_sleep \\ ult26 lt; /按钮
\\ ltlt;按钮ID =“ btn2” \\ ajax_test \\ /按钮
\\ ltlt;按钮ID =“ btn4” \\上传json数据\\ /按钮
%csrf_token%
:u0026 \\ u0026:
\\ ltlt; div \\
\\ ltlt;输入类型=“文本” id =“ i1” \\ + \\ ult26 lt;输入类型=“文本” id =“ i2” \\ =:
\\ ltlt;输入提示=“文本” ID =“ i3” \\ \\ ltlt;按钮ID =“ btn3” \\计算\\ /按钮\\ ltlt; span id =“ s1” \\ u0:026分; \\ ltlt; /跨度
\\ ltlt; / div \\
:u0026 \\ u0026:
\\ ltlt; h3 \\格式化下载文件\\ / h3 >>
\\ ltlt;表单操作=“ /上载/”方法=“ POST” enctype =“多部分/表单数据” \\
%csrf_token%
\\ ltlt;输入类型=“文本”名称=“用户” \\
\\ ltlt;输入类型=“文件”名称=“文件名” \\
\\ ltlt;输入类型=“提交”>
\\ ltlt; / ??
\\ ltlt;脚本src =“ https://cdn.bootcss.com/jquery/3.4.1/jquery.js” \\ u0026 gt; \\ ltlt; /脚本>
\\ ltlt;脚本\\
#assinchron案例#}
$(“#btn1”):点击(功能(){
$ .ajax(。
网址: “ / ajax_sleep /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
$(“#btn2”):点击(功能(){
$ .ajax(。
网址: “ / ajax_test /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
#计算案例#}
$(‘#Btn3’):点击(功能())
var num1 = $(“#i1”)。 val();
var num2 = $(“#i2”)。 val();
$ .ajax(。
网址: “ / ajax_sum /”,
类型:“ POST”
资料
num1: num1,
num2: num2,
csrfmiddlewaretoken: $(“ [[[name = csrfmiddlewaretoken]”))。 val(),
,
祝你好运函数(数据){
如果(data.status){
$(“#i3”)。 val(data.msg);
和不同
$(“#s1”)。文字(data.msg);
setTimeout(函数())
$(“#s1”)。文字(“”);
},2000年)
}
}
})
});
$(“#btn4”):点击(功能(){
$ .ajax(。
网址: “ / ajax_json /”,
类型:“ POST”
内容类型:“ json”,
头衔{“ X-CSRFToken”: $(“ [name =‘csrfmiddlewarewaretoken’]”)。 val()},//将csrf添加到查询的标题
数据:JSON.stringify({
一个100,
b。 200,
用户:“ darren”,
}),
祝你好运函数(数据){
console.log(数据)
}
})
})
\\ ltlt; /脚本>
\\ ltlt; /身体>
\\ ltlt; / html \\
[受邮件保护]。 Yc / PycharmProjects / orm_demo#mkdir媒体
登录,选择一个文件
点击播放即可成功下载
状态退出
\\ ltlt; QueryDict。
\\ ltlt; MultiValueDict: {“文件名”:[\\ u0026 lt; InMemoryUploadedFile:test111.jpeg(图片/ jpeg)\\ u0026 gt;]} \\ u0026 gt;
服务器视图
[e。受保护]。 ?/ PycharmProjects / orm_demo#ll媒体/
六个基于Ajax声明的上传文件
编辑HTML:
\\ ult DOCTYPE HTML \\
\\ ltlt; html lang =“ zh-CN” \\ u>
\\ ltlt;头>>
\\ ltlt;元字符集=“ UTF-8” \\
标题\\标题\\ /标题
\\ ltlt; /头>
\\ ltlt;按钮ID =“ btn1” \\ ajax_sleep \\ ult26 lt; /按钮
\\ ltlt;按钮ID =“ btn2” \\ ajax_test \\ /按钮
\\ ltlt;按钮ID =“ btn4” \\上传json数据\\ /按钮
%csrf_token%
:u0026 \\ u0026:
\\ ltlt; div \\
\\ ltlt;输入类型=“文本” id =“ i1” \\ + \\ ult26 lt;输入类型=“文本” id =“ i2” \\ =:
\\ ltlt;输入提示=“文本” ID =“ i3” \\ \\ ltlt;按钮ID =“ btn3” \\计算\\ /按钮\\ ltlt;跨度ID =“ s1” \\ \\ ltlt; /跨度
\\ ltlt; / div \\
:u0026 \\ u0026:
\\ ltlt; h3 \\格式化下载文件\\ / h3 >>
{#\\ u0026 lt;表单操作=“ /上载/”方法=“ POST” enctype =“多部分/表单数据” \\ #
%csrf_token%
\\ ltlt;输入类型=“文本” id =“用户”名称=“用户” \\
\\ ltlt;输入类型=“文件” ID =“文件1”名称=“文件名” \\
\\ ltlt;按钮ID =“ btn5” \\ ajax下载文件\\ /按钮
{#\\ u0026 lt;输入类型=“提交”> #
{#\\ u0026 lt; / ?? #
\\ ltlt;脚本src =“ https://cdn.bootcss.com/jquery/3.4.1/jquery.js” \\ u0026 gt; \\ ltlt; /脚本>
\\ ltlt;脚本\\
#assinchron案例#}
$(“#btn1”):点击(功能(){
$ .ajax(。
网址: “ / ajax_sleep /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
$(“#btn2”):点击(功能(){
$ .ajax(。
网址: “ / ajax_test /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
#计算案例#}
$(‘#Btn3’):点击(功能())
var num1 = $(“#i1”)。 val();
var num2 = $(“#i2”)。 val();
$ .ajax(。
网址: “ / ajax_sum /”,
类型:“ POST”
资料
num1: num1,
num2: num2,
csrfmiddlewaretoken: $(“ [[[name = csrfmiddlewaretoken]”))。 val(),
,
祝你好运函数(数据){
如果(data.status){
$(“#i3”)。 val(data.msg);
和不同
$(“#s1”)。文字(data.msg);
setTimeout(函数())
$(“#s1”)。文字(“”);
},2000年)
}
}
})
});
$(“#btn4”):点击(功能(){
$ .ajax(。
网址: “ / ajax_json /”,
类型:“ POST”
内容类型:“ json”,
头衔{“ X-CSRFToken”: $(“ [name =‘csrfmiddlewarewaretoken’]”)。 val()},//将csrf添加到查询的标题
数据:JSON.stringify({
一个100,
b。 200,
用户:“ darren”,
}),
祝你好运函数(数据){
console.log(数据)
}
})
})
\\ ltlt; /脚本>
\\ ltlt; /身体>
\\ ltlt; / html \\
出道
添加Ajax:
\\ ult DOCTYPE HTML \\
\\ ltlt; html lang =“ zh-CN” \\ u>
\\ ltlt;头>>
\\ ltlt;元字符集=“ UTF-8” \\
标题\\标题\\ /标题
\\ ltlt; /头>
\\ ltlt;按钮ID =“ btn1” \\ ajax_sleep \\ ult26 lt; /按钮
\\ ltlt;按钮ID =“ btn2” \\ ajax_test \\ /按钮
\\ ltlt;按钮ID =“ btn4” \\上传json数据\\ /按钮
%csrf_token%
:u0026 \\ u0026:
\\ ltlt; div \\
\\ ltlt;输入类型=“文本” id =“ i1” \\ + \\ ult26 lt;输入类型=“文本” id =“ i2” \\ =:
\\ ltlt;输入提示=“文本” ID =“ i3” \\ \\ ltlt;按钮ID =“ btn3” \\计算\\ /按钮\\ ltlt;跨度ID =“ s1” \\ \\ ltlt; /跨度
\\ ltlt; / div \\
:u0026 \\ u0026:
\\ ltlt; h3 \\格式化下载文件\\ / h3 >>
{#\\ u0026 lt;表单操作=“ /上载/”方法=“ POST” enctype =“多部分/表单数据” \\ #
%csrf_token%
\\ ltlt;输入类型=“文本” id =“用户”名称=“用户” \\
\\ ltlt;输入类型=“文件” ID =“文件1”名称=“文件名” \\
\\ ltlt;按钮ID =“ btn5” \\ ajax下载文件\\ /按钮
{#\\ u0026 lt;输入类型=“提交”> #
{#\\ u0026 lt; / ?? #
\\ ltlt;脚本src =“ https://cdn.bootcss.com/jquery/3.4.1/jquery.js” \\ u0026 gt; \\ ltlt; /脚本>
\\ ltlt;脚本\\
#assinchron案例#}
$(“#btn1”):点击(功能(){
$ .ajax(。
网址: “ / ajax_sleep /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
$(“#btn2”):点击(功能(){
$ .ajax(。
网址: “ / ajax_test /”,
类型:“ GET”
祝你好运函数(数据){
console.log(数据);
}
}
)
})
#计算案例#}
$(‘#Btn3’):点击(功能())
var num1 = $(“#i1”)。 val();
var num2 = $(“#i2”)。 val();
$ .ajax(。
网址: “ / ajax_sum /”,
类型:“ POST”
资料
num1: num1,
num2: num2,
csrfmiddlewaretoken: $(“ [[[name = csrfmiddlewaretoken]”))。 val(),
,
祝你好运函数(数据){
如果(data.status){
$(“#i3”)。 val(data.msg);
和不同
$(“#s1”)。文字(data.msg);
setTimeout(函数())
$(“#s1”)。文字(“”);
},2000年)
}
}
})
});
$(“#btn4”):点击(功能(){
$ .ajax(。
网址: “ / ajax_json /”,
类型:“ POST”
内容类型:“ json”,
头衔{“ X-CSRFToken”: $(“ [name =‘csrfmiddlewarewaretoken’]”)。 val()},//将csrf添加到查询的标题
数据:JSON.stringify({
一个100,
b。 200,
用户:“ darren”,
}),
祝你好运函数(数据){
console.log(数据)
}
})
})
{#ajaxupload文件#}
$(“#btn5”):点击(功能(){
var formdata = new FormData();
val()); formdata.append(“ csrfmiddlewarewaretoken”,$(“ [name =‘csrfmiddlewarewaretoken‘]”)。
formdata.append(“ file_name”,$(“#file1”)[0] .files [0]);
$ .ajax(。
网址: “ /上传/”
类型:“ POST”
processData: false,//通知jQuery不处理发送的数据花草哪里有图片价格大全
contentType: false,//告诉jQuery不要指定标题类型查询
数据:格式,
祝你好运函数(数据){
console.log(数据)
}
})
})
\\ ltlt; /脚本>
\\ ltlt; /身体>
\\ ltlt; / html \\
将图像名称更改为test222
点击ajax上传文件
检查服务器文件
[e。受保护]。 ?/ PycharmProjects / orm_demo#ll媒体/
ContentType用于七个查询:
ContentType是查询主体的编码类型。
Application / x-www-form-urlencoded应该是通过POST提交数据的最常用方法。国土b雪00如果不输入enctype属性,则必须将数据提交到应用程序/ x-www-form-urlencoded。
这是呈现多个数据的另一种常用方法。当我们使用雪上传文件时,我们需要使\\ n雪00雪等于倍数/雪数据。
应用程序/ json。作为响应标题,这种内容对于我们而言当然不是新知识。实际上,现在越来越多的人使用它作为查询标题来告诉服务器消息主体是序列化的JSON行。由于JSON的普及,除较低版本的IE之外,所有主流浏览器均支持JSON.stringify,并且服务器端语言还具有JSON处理功能。 JSON的使用不会引起任何问题。
058. Python前端或angio ? Ajaxarm数据asenoneexttps.JS
相关推荐
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo