<li id="u9fd8"><object id="u9fd8"><u id="u9fd8"></u></object></li>

  • <em id="u9fd8"><tr id="u9fd8"></tr></em>
    1. 全部 71 系統使用 30 環境部署 5 建站工具 6 視頻教程 15 開發日志 15

      使用Ajax無刷新提交留言及表單

      作者:admin    時間:2019-01-09   訪問量:7869

      PbootCMS本身對于使用ajax請求進行提交時會返回Json數據,那么我們可以無需使用API的情況下實現ajax提交留言,并自定義頁面提示,提升用戶體驗。


      1、留言表單

      <form onsubmit="return submsg(this);">
          聯系人<input type="text" name="contacts" required id="contacts">
          手 機<input type="text" name="mobile" required id="mobile">
          內 容<textarea name="content" id="content"></textarea>
          驗證碼<input type="text" name="checkcode" required id="checkcode">
          <img title="點擊刷新" src="{pboot:checkcode}" onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);" />
          <button type="submit">提交留言</button>
      </form>


      2、Ajax提交

      <script>
      
      //ajax提交留言,由于涉及到提交地址標簽的解析,JS需要放在html文件中
      function submsg(obj){
        var url='{pboot:msgaction}'; //如果是自定義表單則使用地址{pboot:form fcode=*}
        var contacts=$(obj).find("#contacts").val();
        var mobile=$(obj).find("#mobile").val();
        var content=$(obj).find("#content").val();
        var checkcode=$(obj).find("#checkcode").val();
        
        $.ajax({
          type: 'POST',
          url: url,
          dataType: 'json',
          data: {
              contacts: contacts,
              mobile: mobile,
              content: content,
              checkcode: checkcode
          },
          success: function (response, status) {
            if(response.code){
               alert("謝謝您的反饋,我們會盡快聯系您!");
               $(obj)[0].reset(); 
            }else{
               alert(response.data);
            }
          },
          error:function(xhr,status,error){
            alert('返回數據異常!');
          }
        });
        return false;
      }
      </script>


      上一篇:使用技巧教程(二) - 自定義分頁樣式

      下一篇:PbootCMS站點地圖

      返回頂部
      国产精品VA在线观看入口,91福利国产在线观看,,亚洲国产日韩欧美一区二区三区,国产精品无码一二区不卡免费