html+ajax+django简单测试（前后端分离）

fireworkseasycold

已于 2022-07-14 14:28:53 修改

阅读量841

点赞数

文章标签： django html ajax

于 2022-07-14 10:33:14 首次发布

本文链接：https://blog.csdn.net/moonson96/article/details/125668678

版权

html+ajax+django+前后端分离

1.基本写法

这里使用jq的ajax
可以参考菜鸟教程和菜鸟工具
$.ajax({
url:‘’, //接口地址
type：‘’, //默认是get;这是请求方式
header:{},
dataType:“”,//设置接受到的响应数据的格式
data:‘’ //给后端的数据 json类型
success:function(res){
//请求成功的函数 httpstatuscode=200，这里函数可以function命名单独拿出来写
},
error:function(e){
//请求失败后的函数 httpstatuscode!=200
}
})

url说明：
相对路径
//url 以根路径开头（/）的请求路径，表示该路径是基于服务器的根路径的，则请求地址为服务器路径+url,
//在本地开发的时候，一般http://localhost:port是作为服务器路径的
//不以根路径开头，表示该路径是基于当前html路径的，请求地址为页面地址+url
绝对路径
var baseurl=“http://ip+port/”;//ajax请求地址头部，服务器路径
url:baseurl+“相对路径”

2.ajax与html,django的交互

模拟前后端分离（不完全的）
django创建一个项目，前端后端部署在同一个django服务里，其实没有分离，只是写法上分离了（注意分离不能用模板标签）
*

2.1#前端

2.1.1页面

test.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax测试</title>
</head>
<body>
<div>
    <button onclick="fun1()">get请求无参数</button>
    <div id="test">index</div>
    <div id="test2">index</div>
</div>
<br/>
<div>
    <button onclick="fun2()">get请求带参数</button>
    <div id="test3">index2</div>
    <div id="test4">index2</div>
</div>
<br/>

<div>
    <button onclick="fun3()">post请求无参数</button>
    <div id="test5">index3</div>
    <div id="test6">index3</div>
</div>
<br/>
<div>
    <button onclick="fun4()">post请求无参数</button>
    <div id="test7">index4</div>
    <div id="test8"

最低0.47元/天解锁文章

fireworkseasycold

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html+ajax+django简单测试（前后端分离）

html+ajax+django+前后端分离这里使用jq的ajax$.ajax({url:‘’, //接口地址type：‘’, //默认是get;header:{},data:‘’ //给后端的数据 json类型success:function(res){//请求成功的函数 httpstatuscode=200，这里函数可以引用命名单独拿出来写},error:function(e){//请求失败后的函数 httpstatuscode!=200}})模拟前后端分离（不完全的）djang
复制链接

扫一扫