记一下踩过的坑（vue+django）
程序员文章站
2022-05-19 21:46:06
...
1、vue与django{{}}冲突：
{% verbatim %} {% endverbatim %}
2、axios取值：
<div data-v-52f9b1fc="" class="priceCon">
<input @click="buy" :data-sid="item.pk" data-v-52f9b1fc="" type="button" class="price" value="购买">
</div>
buy:function (e) {
var qs = Qs
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
var sid = e.target.getAttribute('data-sid');//取data-sid值
console.log(e.target.getAttribute('data-sid'));
axios.post("/polls/addOrder",qs.stringify({
sid: sid,
}))
.then(function (res) {
window.location.href = "/polls/recommendshow";
})
},vue 用data-sid=“{{item.pk}}”不行
纯html可以
{% for item in items %}
<tr>
<td>
{% csrf_token %}
{{ item.sname }}
<input data-sid="{{ item.sid }}" class="js-buy" type="button" value="购买">
</td>
</tr>
{% endfor %}
$(".js-buy").bind("click", function () {
var $this = $(this);
var sid = $this.attr("data-sid");//取data-sid值
$.ajax({
type: "post",
url: "/polls/addOrder",
data: {
sid: sid,
csrfmiddlewaretoken: '{{ csrf_token }}'
}, function(res) {
console.info(res)
},
success:function(data) {
alert("购买成功")
},
});
})3、axios post传值 qs引入
https://blog.csdn.net/example440982/article/details/89927349（原帖）
<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<html>
<body>
<div>
</div>
<script>
// 一般引入qs库都赋值为qs，不过浏览器全局引入的是 window.Qs对象，
// 所以直接用 qs.stringify() 会报 qs undefined
var qs = Qs
// 配置post的请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// qs.stringify() 这里可以做一下封装
axios.post('url', qs.stringify({
id: 1,
name: 'zhangsan'
})).then(function(res) {
// 返回 Promise对象数据
})
</script>
</body>
</html>buy:function (e) {
var qs = Qs
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
var sid = e.target.getAttribute('data-sid');//取data-sid值
console.log(e.target.getAttribute('data-sid'));
axios.post("/polls/addOrder",qs.stringify({
sid: sid,
}))
.then(function (res) {
window.location.href = "/polls/recommendshow";
})
},后台接收
def addOrder(request):
sid = request.POST['sid']
print(sid)
# #uid = request.session['uid']
sid = int(sid)
order = Order.objects.create( sid = sid, uid = 1)
return HttpResponse("购买成功")4、axios 接后台数据
后台序列化
def toTestdata(request):
items = Item.objects.all().order_by('?')[:100]
items = serializers.serialize("json", items)
#cont = {'items': items}
return JsonResponse(items, safe=False)前端
mounted:function () {
var that = this;
axios.get("/polls/testdata",{
params: {
}
}).then(function (res) {
//后端传过来JSON格式的数据 前端转化成JSON数据
console.log(JSON.parse(res.data));
that.items = JSON.parse(res.data);
})
},5、ajax
{% for item in items %}
<tr>
<td>
{% csrf_token %}
{{ item.sname }}
<input data-sid="{{ item.sid }}" class="js-buy" type="button" value="购买">
</td>
</tr>
{% endfor %}$(".js-buy").bind("click", function () {
var $this = $(this);
var sid = $this.attr("data-sid");
$.ajax({
type: "post",
url: "/polls/addOrder",
data: {
sid: sid,
csrfmiddlewaretoken: '{{ csrf_token }}'
}, function(res) {
console.info(res)
},
success:function(data) {
alert("购买成功")
},
});
})
上一篇： 新手驾车
下一篇： 脑残级雷语,哗众取宠了哦