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

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

PbootCMS教程

欧方源码 2022-07-16 1300次

【评论表单】：
<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个）

栏目导航

热门资源

热门标签

装修公司网站模板 (2) 设计 (2) 汽车配件 (1) 房产合同服务模板 (1) 省市区 (1) 网络公司模板 (2) 时间特效 (2) 皮带轨道 (1) 园林 (1) 时间选择 (1) 新能源网站模板 (1) 大气模板 (5) 家政保洁 (1) 企事业单位模板 (2) 双语源码 (2) js购物车 (1) jQuery插件 (4) 图片展示 (1) 新型材料 (1) 婚纱摄影网站模板 (2) 工程建筑网站模板 (9) 净水器网站模板 (2) 家政保洁网站模板 (1) 网址导航 (1) 注册表单 (1) 财务代理记账公司模板 (2) qq客服代码 (3) 石雕 (1) 软件应用官网模板 (2) 安防设备网页模板 (1) 新能源 (1) 营销型网站模板 (23)