为什么能接收POST请求,数据库数据会变更,也能在preview里看到ok,但是不会弹窗显示ok


{% extends 'base.html' %}
{% block title %}
<title>{{ prod_obj.name }}</title>
{% endblock %}
{% block content %}
<!--主体-->
<div class="weui-content">
<!--产品详情-->
<div class="weui-tab">
<div
class="weui-navbar proinfo-tab-menu"
style=""
>
<a
class="weui-navbar__item proinfo-tab-tit weui-bar__item--on"
href="#tab1"
>商品</a
>
<a class="weui-navbar__item proinfo-tab-tit" href="#tab2">详情</a>
<a class="weui-navbar__item proinfo-tab-tit" href="#tab3">评价</a>
</div>
<div class="weui-tab__bd proinfo-tab-con">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<!--主图轮播-->
<div class="swiper-container swiper-zhutu">
<div class="swiper-wrapper">
{% for banner in prod_obj.banners.all %}
<div class="swiper-slide">
<img src="{{ banner.img.url }}" />
</div>
{% endfor %}
</div>
<div class="swiper-pagination swiper-zhutu-pagination"></div>
</div>
<div class="wy-media-box-nomg weui-media-box_text">
<h4 class="wy-media-box__title">
{{ prod_obj.name }}
</h4>
<div class="wy-pro-pri mg-tb-5">
¥<em class="num font-20">{{ prod_obj.price }}</em>
</div>
<p class="weui-media-box__desc">
{{ prod_obj.description }}
</p>
</div>
<!--<div class="wy-media-box2 weui-media-box_text">
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l">
<span class="promotion-label-tit">优惠</span>
</div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<i class="yhq"><span class="label-text">优惠券</span></i>
<span class="promotion-item-text">满197.00减40.00</span>
</div>
<div class="promotion-message clear">
<i class="yhq"><span class="label-text">优惠券</span></i>
<span class="promotion-item-text">满197.00减40.00</span>
</div>
<div class="yhq-btn clear">
<a href="yhq_list.html">去领券</a>
</div>
</div>
</div>
</div>-->
<!--<div class="wy-media-box2 weui-media-box_text">
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l">
<span class="promotion-label-tit">购买数量</span>
</div>
<div class="weui-media-box__bd">
<div class="promotion-sku clear">
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
</div>
</div>
</div>
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l">
<span class="promotion-label-tit">颜色</span>
</div>
<div class="weui-media-box__bd">
<div class="promotion-sku clear">
<ul>
<li><a href="javascript:;">黑色</a></li>
<li><a href="javascript:;">红色</a></li>
<li><a href="javascript:;">白色</a></li>
<li><a href="javascript:;">蓝色</a></li>
<li><a href="javascript:;">橘黄色</a></li>
<li><a href="javascript:;">绿色</a></li>
</ul>
</div>
</div>
</div>
</div>-->
<div class="wy-media-box2 txtpd weui-media-box_text">
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l">
<span class="promotion-label-tit">送至</span>
</div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<span class="promotion-item-text">{{ default_addr.province }}</span>
<span class="promotion-item-text">{{ default_addr.city }}</span>
<span class="promotion-item-text">{{ default_addr.area }}</span>
</div>
</div>
</div>
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l">
<span class="promotion-label-tit">运费</span>
</div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<span class="promotion-item-text"
>免运费<!--<div class="wy-pro-pri">¥<span class="num">11.00</span></div>--></span
>
</div>
</div>
</div>
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l">
<span class="promotion-label-tit">商家</span>
</div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<span class="promotion-item-text">官方自营</span>
</div>
</div>
</div>
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l">
<span class="promotion-label-tit">提示</span>
</div>
<div class="weui-media-box__bd">
<div class="promotion-message clear">
<span class="promotion-item-text"
><p class="txt-color-ml">支持7天无理由退换货</p></span
>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="weui-tab__bd-item ">
<div class="pro-detail">
{{ prod_obj.content|safe }}
</div>
</div>
<div id="tab3" class="weui-tab__bd-item">
<!--评价-->
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd">
<img
src="/static/upload/headimg.jpg"
alt=""
style="width:20px;margin-right:5px;display:block"
/>
</div>
<div class="weui-cell__bd weui-cell_primary">
<p>飞翔的小土豆</p>
</div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star">
<span class="real-star comment-stars-width5"></span>
</div>
<p class="weui-media-box__desc">
面料不错,码数也正常 男朋友穿的很合适。
</p>
<ul class="weui-uploader__files clear mg-com-img">
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
</ul>
</div>
</div>
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd">
<img
src="/static/upload/headimg.jpg"
alt=""
style="width:20px;margin-right:5px;display:block"
/>
</div>
<div class="weui-cell__bd weui-cell_primary">
<p>爱情海的事故</p>
</div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star">
<span class="real-star comment-stars-width3"></span>
</div>
<p class="weui-media-box__desc">
面料不错,码数也正常 男朋友面料不错,码数也正常
男朋友穿的面料不错,码数也正常 男朋友穿的穿的很合适。
</p>
<ul class="weui-uploader__files clear mg-com-img">
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
</ul>
</div>
</div>
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd">
<img
src="/static/upload/headimg.jpg"
alt=""
style="width:20px;margin-right:5px;display:block"
/>
</div>
<div class="weui-cell__bd weui-cell_primary">
<p>爱情海的事故</p>
</div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star">
<span class="real-star comment-stars-width3"></span>
</div>
<p class="weui-media-box__desc">
面料不错,码数也正常 男朋友面料不错,码数也正常
男朋友穿的面料不错,码数也正常 男朋友穿的穿的很合适。
</p>
<ul class="weui-uploader__files clear mg-com-img">
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
</ul>
</div>
</div>
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd">
<img
src="/static/upload/headimg.jpg"
alt=""
style="width:20px;margin-right:5px;display:block"
/>
</div>
<div class="weui-cell__bd weui-cell_primary">
<p>爱情海的事故</p>
</div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star">
<span class="real-star comment-stars-width3"></span>
</div>
<p class="weui-media-box__desc">
面料不错,码数也正常 男朋友面料不错,码数也正常
男朋友穿的面料不错,码数也正常 男朋友穿的穿的很合适。
</p>
<ul class="weui-uploader__files clear mg-com-img">
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
onclick="window.location.reload('gallery.html')"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/ban2.jpg)"
onclick="window.location.reload('gallery.html')"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
onclick="window.location.reload('gallery.html')"
></li>
</ul>
</div>
</div>
<div class="weui-panel__bd">
<div class="wy-media-box weui-media-box_text">
<div class="weui-cell nopd weui-cell_access">
<div class="weui-cell__hd">
<img
src="/static/upload/headimg.jpg"
alt=""
style="width:20px;margin-right:5px;display:block"
/>
</div>
<div class="weui-cell__bd weui-cell_primary">
<p>爱情海的事故</p>
</div>
<span class="weui-cell__time">2017-02-06</span>
</div>
<div class="comment-item-star">
<span class="real-star comment-stars-width3"></span>
</div>
<p class="weui-media-box__desc">
面料不错,码数也正常 男朋友面料不错,码数也正常
男朋友穿的面料不错,码数也正常 男朋友穿的穿的很合适。
</p>
<ul class="weui-uploader__files clear mg-com-img">
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
<li
class="weui-uploader__file"
style="background-image:url(../static/upload/pro3.jpg)"
></li>
</ul>
</div>
</div>
<a
href="javascript:void(0);"
class="weui-cell weui-cell_access weui-cell_link list-more"
>
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
</div>
</div>
<span id="tophovertree" title="返回顶部"></span>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
<a href="javascript:;" class="promotion-foot-menu-items">
<div class="weui-tabbar__icon promotion-foot-menu-kefu"></div>
<p class="weui-tabbar__label">客服</p>
</a>
<a href="javascript:;" id="show-toast" class="promotion-foot-menu-items">
<div class="weui-tabbar__icon promotion-foot-menu-collection"></div>
<p class="weui-tabbar__label">收藏</p>
</a>
<a href="shopcart.html" class="promotion-foot-menu-items">
<span
class="weui-badge"
style="position: absolute;top: -.4em;right: 1em;"
>8</span
>
<div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
<p class="weui-tabbar__label">购物车</p>
</a>
<a
href="javascript:;"
id="id_add_cart"
class="weui-tabbar__item yellow-color open-popup"
data-target="#join_cart"
>
<p class="promotion-foot-menu-label">加入购物车</p>
</a>
<a
href="javascript:;"
class="weui-tabbar__item red-color open-popup"
data-target="#selcet_sku"
>
<p class="promotion-foot-menu-label">立即购买</p>
</a>
</div>
<div
id="join_cart"
class="weui-popup__container popup-bottom"
style="z-index:600;"
>
<div class="weui-popup__overlay" style="opacity:1;"></div>
<div class="weui-popup__modal">
<div class="modal-content">
<div class="weui-msg" style="padding-top:0;">
<div class="weui-msg__icon-area">
<i class="weui-icon-success weui-icon_msg"></i>
</div>
<div class="weui-msg__text-area">
<h2 class="weui-msg__title">成功加入购物车</h2>
<p class="weui-msg__desc">
亲爱的用户,您的商品已成功加入购物车,为了保证您的商品快速送达,请您尽快到购物车结算。
</p>
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<a href="shopcart.html" class="weui-btn weui-btn_primary"
>去购物车结算</a
>
<a
href="javascript:;"
class="weui-btn weui-btn_default close-popup"
>不,我再看看</a
>
</p>
</div>
</div>
</div>
</div>
</div>
<div
id="selcet_sku"
class="weui-popup__container popup-bottom"
style="z-index:600;"
>
<div class="weui-popup__overlay" style="opacity:1;"></div>
<div class="weui-popup__modal">
<div class="toolbar">
<div class="toolbar-inner">
<a href="javascript:;" class="picker-button close-popup">关闭</a>
<h1 class="title">商品属性</h1>
</div>
</div>
<div class="modal-content">
<div class="weui-msg" style="padding-top:0;">
<div class="wy-media-box2 weui-media-box_text" style="margin:0;">
<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l">
<span class="promotion-label-tit">购买数量</span>
</div>
<div class="weui-media-box__bd">
<div class="promotion-sku clear">
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
</div>
</div>
</div>
<!--<div class="weui-media-box_appmsg">
<div class="weui-media-box__hd proinfo-txt-l">
<span class="promotion-label-tit">颜色</span>
</div>
<div class="weui-media-box__bd">
<div class="promotion-sku clear">
<ul>
<li><a href="javascript:;">黑色</a></li>
<li><a href="javascript:;">红色</a></li>
<li><a href="javascript:;">白色</a></li>
<li><a href="javascript:;">蓝色</a></li>
<li><a href="javascript:;">橘黄色</a></li>
<li><a href="javascript:;">绿色</a></li>
</ul>
</div>
</div>
</div>-->
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<a href="../../mine/templates/order_info.html" class="weui-btn weui-btn_primary"
>立即购买</a
>
<a
href="javascript:;"
class="weui-btn weui-btn_default close-popup"
>不,我再看看</a
>
</p>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<script src="/static/js/swiper.js"></script>
<script>
$('.swiper-zhutu').swiper({
loop: true,
paginationType: 'fraction',
autoplay: 5000
});
</script>
<script>
$(function() {
$('.promotion-sku li').click(function() {
$(this)
.addClass('active')
.siblings('li')
.removeClass('active');
});
});
</script>
<script>
$(document).on('click', '#show-toast', function() {
$.toast('收藏成功', function() {
console.log('close');
});
});
</script>
<script>
$(document)
.on('open', '.weui-popup-modal', function() {
console.log('open popup');
})
.on('close', '.weui-popup-modal', function() {
console.log('close popup');
});
</script>
<script>
$(function() {
initTopHoverTree('tophov' + 'ertree', 30, 10, 10);
});
</script>
<script>
function initTopHoverTree(hvtid, times, right, bottom) {
$('#' + hvtid)
.css('right', right)
.css('bottmo', bottom);
$('#' + hvtid).on('click', function() {
goTopHovetree(times);
});
$(window).scroll(function() {
if ($(window).scrollTop() > 268) {
$('#' + hvtid).fadeIn(100);
} else {
$('#' + hvtid).fadeOut(100);
}
});
}
//返回顶部动画
//goTop(500);//500ms内滚回顶部
function goTopHovetree(times) {
if (!!!times) {
$(window).scrollTop(0);
return;
}
var sh = $('body').scrollTop(); //移动总距离
var inter = 13.333; //ms,每次移动间隔时间
var forCount = Math.ceil(times / inter); //移动次数
var stepL = Math.ceil(sh / forCount); //移动步长
var timeId = null;
function aniHovertree() {
!!timeId && clearTimeout(timeId);
timeId = null;
//console.log($('body').scrollTop());
if ($('body').scrollTop() <= 0 || forCount <= 0) {
//移动端判断次数好些,因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况
$('body').scrollTop(0);
return;
}
forCount--;
sh -= stepL;
$('body').scrollTop(sh);
timeId = setTimeout(function() {
aniHovertree();
}, inter);
}
aniHovertree();
}
$('#id_add_cart').click(function () {
$.post('{% url "mine:cart_add" prod_obj.uid %}'), {
count: 1
}, function (rest) {
alert(rest)
}
})
</script>
{% endblock %}正在回答 回答被采纳积分+1
$.post('url地址',{提交的字典类型数据},function(rest){提交后要执行JavaScript的代码})
当post请求提交后,执行{ }内的alert( ),"rest"为"result"简写,用"data"代替也行,只是一个形参,表示django后台返回给这个post请求的数据,比如后台返回"ok",rest值就为"ok"。
另外这里的function可以有其他参数,比如
function(data,status){
if (status == 'success') {
alert(data)
})
第一个参数data表示django后台返回数据,第二个status表示返回的状态,如果提交成功,status值为"success",如果提交失败,status值为"error"。判断返回状态,保证只有在提交成功后,才弹窗。
找到原因了, 是后面js的代码有问题,能解释一下最后这一段代码的逻辑吗?
给id_add_cart绑定一个click事件;
侦测到click时执行一个$.post函数
向url传递一个post请求,携带count=1这个参数
然后这个function(rest)应该怎么理解?
- 参与学习 人
- 提交作业 218 份
- 解答问题 3562 个
本阶段带你用Python开发一个网站,学习主流框架Django+Flask是Python Web开发的第一步,在基础知识上实现积分商城的项目开发,体验真实的项目开发流程,提高解决编程问题和效率的能力。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星