pbootcms文章评论表单、提交及列表制作_PbootCMS教程

pbootcms文章评论表单、提交及列表制作

PbootCMS教程

欧方源码 2022-07-16 965次

【评论表单】：
<form onsubmit="return submitcomment(this);" data-action="{pboot:commentaction}">
  <textarea name="comment" id="comment" placeholder="请输入评论内容">textarea>
  {pboot:2if({pboot:commentcodestatus})}
  <input type="text" name="checkcode" required id="checkcode" placeholder="请输入验证码">
  <img title="点击刷新"  style="height:33px;" src="{pboot:checkcode}"
    onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);" />
  {/pboot:2if}
  <button type="submit">提交评论button>
form>


【评论列表】：
{pboot:comment contentid={content:id} num=20}
    头像：<img src="[comment:headpic]">
    昵称：[comment:nickname]
    日期：[comment:date]
    内容：[comment:comment]
    回复：<span class="replybtn" data-action="[comment:replyaction]">回复span>
    子评论：
      {pboot:commentsub}
          <img src="[commentsub:headpic]">
          [commentsub:nickname]
          [commentsub:date]
          [commentsub:pnickname]
          [commentsub:comment]
          <span class="replybtn" data-action="[commentsub:replyaction]">回复span>
      {/pboot:commentsub}
{/pboot:comment}

{pboot:2if({page:rows}>0)}
  <a href="{page:index}#comment">首页a>
  <a href="{page:pre}#comment">上一页a>
  <a href="{page:next}#comment">下一页a>
  <a href="{page:last}#comment">尾页a>
{2else}
  未查询到任何数据
{/pboot:2if}


【回复表单】：
<form onsubmit="return submitcomment(this);" data-action="" id="replyform">
  <textarea name="comment" id="comment" placeholder="请输入评论内容">textarea>
  {pboot:2if({pboot:commentcodestatus})}
  <input type="text" name="checkcode" required id="checkcode" placeholder="请输入验证码">
  <img title="点击刷新" class="codeimg" style="height:33px;" src="{pboot:checkcode}"
    onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);" />
  {/pboot:2if}
  <button type="submit">提交评论button>
form>


【AJAX】
<script>
  //评论回复  $('.replybtn').on("click", function () {
    var url = $(this).data("action");
    $("#replyform").data("action", url);
  });
  //提交评论  function submitcomment(obj) {
    var url = $(obj).data("action");
    var comment = $(obj).find("#comment").val();
    var checkcode = $(obj).find("#checkcode").val();
    $.ajax({
      type: 'POST',
      url: url,
      dataType: 'json',
      data: {
        comment: comment,
        checkcode: checkcode
      },
      success: function (response, status) {
        if (response.code) {
          alert(response.data);
          $(obj)[0].reset();
          window.location.reload()
        } else {
          if (response.tourl != "") {
            if (confirm(response.data + '是否立即跳转登录？')) {
              location.href = response.tourl;
            }
          }
          $('.codeimg').click();
        }
      },
      error: function (xhr, status, error) {
        alert('返回数据异常！');
      }
    });
    return false;
  }
script>

【点我下载文件】

会员中心开通VIP 在线客服

声明：本站资源来自网络或会员自行发布，请勿用于非法及商业用途，如果侵犯了您的权益请与我们联系!

上一篇: pbootcms模板与pbootcms源码有什么区别

下一篇: pbootcms常用if判断条件语句经典用法案例（16个）

栏目导航

热门资源

热门标签

纸箱网页模板 (1) 五金配件网页模板 (5) 农业设备网站模板 (2) 响应式网站模板 (1) 苗木 (1) 金融通信 (1) 数据机床网页模板 (1) 设计 (2) 风景民宿网页模板 (1) 营销公司网站模板 (2) 购物车 (1) 自媒体模板 (4) 联动菜单 (1) 行业通用 (57) 自媒体 (1) 营销 (1) APP应用软件模板 (2) 家居建材网站模板 (3) 焦点图 (3) 电线电缆网页模板 (1) pos机网页模板 (1) 黄色 (1) 企业模板 (1) 电子设备 (4) 停车场系统 (1) 蓄电池网站模板 (1) 网络公司网站源码 (2) 建筑工程 (2) 旅游景点网站源码 (1) 房产合同服务模板 (1) 抽奖 (1) 菜单 (1)