blog_tp6/view/index/index/guest_book.html

<style>
  .comment-respond {
    background: white;
    box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
    padding: 1.5em 4.6875375%;
  }

  .guestbook {
    width: 100%;
    float: left;
    padding-bottom: 3em;
  }

  .guestbook h2 span {
    font-size: 12px;
  }

  @media only screen and (max-width: 767px) {
    .comment-respond {
      background: white;
      box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
      padding: 1.5em 7.50006%;
    }
  }

  h3 {
    font-size: 1.125em;
    /* 18px / 16px */
    line-height: 1.333;
    /* 24px */
  }

  .comment-respond p {
    margin: 1.125em 0;
  }

  .comment-respond p.comment-notes {
    margin: 1.5em 0;
  }

  .comment-respond label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 0.875em;
    line-height: 1.715;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]):not([type="image"]),
  textarea {
    width: 100%;
    font-family: "Roboto", "Open Sans", sans-serif;
    font-weight: 400;
    padding: 10px 12px;
    max-width: 27.75em;
    min-height: 26px;
    background: #F7F7F7;
    color: #333333;
    border: solid 1px #D4D4D4;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
  }

  textarea {
    max-width: 41.625em;
    overflow: auto;
  }

  .comment-respond p.form-submit {
    margin-top: 2.25em;
  }

  input[type="submit"] {
    font-size: 0.75em;
    line-height: 1.5;
  }

  input[type="submit"] {
    font-family: "Roboto", "Open Sans", sans-serif;
    font-weight: 400;
    padding: 10px 12px;
    color: #333333;
    border: solid 1px #333333;
    background: none;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .pager {
    margin-left: 10%;
    width: 60%;
    background: red;
  }

  ul.pager li:first-child {
    float: left;
  }

  ul.pager li:last-child {
    float: left;
    margin-left: 30%;
  }
</style>

<div class="box">
  <div class="newsview">
    <h2>留言</h2>
    <div class="news_infos">
      <p>有什么想告诉我说的, 就在这吧ヾ(✿ﾟ▽ﾟ)ノ</p>
    </div>
  </div>
  <!-- #respond -->
  <div id="respond" class="comment-respond">
    <h3 id="reply-title" class="comment-reply-title">Leave a Reply</h3>
    <form action="{:url('/index/save_guest_book')}" method="post" id="commentform" class="comment-form" novalidate="">
      <p class="comment-notes"><span id="email-notes">我会妥善保存你的邮箱哒(｀・ω・´).</span> 必填项已标记<span class="required">*</span>
      </p>
      <p class="comment-form-comment">
        <label for="comment">Comment*</label>
        <textarea required="" id="content" name="content" cols="45" rows="8" aria-required="true"></textarea>
      </p>
      <p class="comment-form-author">
        <label for="author">Name*</label>
        <input id="name" name="name" type="text" placeholder="Jane Doe" value="" size="26">
      </p>
      <p class="comment-form-email">
        <label for="contact">contact*</label>
        <input id="contact" name="contact" type="text" placeholder="name@email.com or 13355556666" value="" size="26">
      </p>
      <p class="comment-form-url">
        <label for="url">url</label>
        <input id="url" name="url" type="text" placeholder="https://www.google.com" value="" size="26">
      </p>
      <p class="form-submit">
        <button type="button" id="submit" class="submit">Post Comment</button>
        <!-- <input type="hidden" name="comment_post_ID" value="23" id="comment_post_ID">
        <input type="hidden" name="comment_parent" id="comment_parent" value="0"> -->
      </p>
    </form>
    <div>
      <p class="msg" style="display: none;color: orangered;">提交成功</p>
    </div>
  </div><!-- #respond end-->
  <div class="blank"></div>
  <div class="guestbook">
    {foreach $list as $val}
    <div class="bloglist">
      <div>
        <h2>{$val.name} <span>{$val.time|date="Y/m/d"}</span></h2>
      </div>
      <p>{$val.content}</p>
    </div>
    {/foreach}
    {$list->render()}
  </div>
</div>

<script>
  $("#submit").click(function () {
    $.post('/index/save_guest_book',  {
      'name': $("#name").val(),
      'content': $("#content").val(),
      'contact': $("#contact").val(),
      'url': $("#url").val(),
    }, function (res) {
      console.log(res);
      if (res.code == 0) {
        $(".msg").show();
        var html = '<div class="bloglist"><div><h2>'+res.data.name+'<span>'+res.data.datetime+'</span></h2>';
          html += '</div><p>'+res.data.content+'</p></div>';
        $(".guestbook").prepend(html);
        setTimeout(()=>{
          $(".msg").hide();
        }, 1000);
      } else {
        $(".msg").html(res.msg);
        $(".msg").show();
        setTimeout(()=>{
          $(".msg").hide();
        }, 1000);
        $(".msg").html('提交成功');
      }
    }, 'json');
  })
</script>