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

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

http://img1.sycdn.imooc.com//climg/5e7d6f47097bf7ea13160889.jpg

http://img1.sycdn.imooc.com//climg/5e7d6eec094fe3c113160889.jpg

{% 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

登陆购买课程后可参与讨论,去登陆

2回答
慕丝1539783 2020-03-27 18:46:54

$.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"。判断返回状态,保证只有在提交成功后,才弹窗。

  • 提问者 SheepShake #1
    所以是根据位置传参?除了返回的数据和状态,还有其他默认的参数吗?
    2020-03-27 18:51:50
提问者 SheepShake 2020-03-27 11:32:34

找到原因了, 是后面js的代码有问题,能解释一下最后这一段代码的逻辑吗?http://img1.sycdn.imooc.com//climg/5e7d72cf09a311f506290179.jpg

  1.  给id_add_cart绑定一个click事件;

  2. 侦测到click时执行一个$.post函数

  3. 向url传递一个post请求,携带count=1这个参数

  4. 然后这个function(rest)应该怎么理解?

  • 同学,你好。同学可以参考"慕丝1539783"小伙伴的回答,当post请求提交后,会执行函数内的alert()弹出消息框,显示得到的rest内容,祝学习愉快~~~~
    2020-03-27 19:37:22
  • 提问者 SheepShake 回复 好帮手慕美 #2
    所以是根据位置传参?除了返回的数据和状态,还有其他默认的参数吗?
    2020-03-27 19:38:07
  • 慕之熠_灿烈 回复 提问者 SheepShake #3
    关于ajax中post的方法中,相关的参数还有很多,具体如下(根据课程的实际需要,暂时不需要讲解那么深,且没有相关的业务去体现对应参数的功能): $.ajax({ url: "http://www.hzhuti.com", //请求url地址 dataType: "json", //数据返回格式json async: true, //请求是否异步,默认为异步, data: { "id": "value" }, //参数值 type: "GET", //请求方式 beforeSend: function(request) { //请求前的处理 request.setRequestHeader("Content-type","application/json"); request.setRequestHeader("Source","101"); request.setRequestHeader("Token","aaw--wssw-ss..."); }, success: function(data) { //请求成功时处理 }, complete: function() { //请求完成的处理 }, error: function() { //请求出错处理 } });
    2020-03-29 10:05:00
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.从网页搭建入门Python Web
  • 参与学习           人
  • 提交作业       218    份
  • 解答问题       3562    个

本阶段带你用Python开发一个网站,学习主流框架Django+Flask是Python Web开发的第一步,在基础知识上实现积分商城的项目开发,体验真实的项目开发流程,提高解决编程问题和效率的能力。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师