红穆笔记
首頁 語言筆記 jQuery 使用Ajax無刷新提交留言及表單
語言筆記 JavaScript

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

jQuery 使用Ajax无刷新提交留言及表单

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>
微信赞赏

微信

支付宝赞赏

支付寶

✍️ 作者: 紅穆

網站管理員 · 感謝閱讀,更多精彩內容敬請關注

作者主頁 查看主頁 →

相關文章

js 鼠标移上去修改style属性

js 鼠標移上去修改style屬性 語言筆記 JavaScript

演示效果鼠標移上去,顏色顯示爲紅色,鼠標移開,顏色顯示爲黑色。獲取id對象:document.getElementById()鼠標移上去:onmouseover鼠標移開:onmouseout&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; …
👁 130

推薦閱讀

PHP 读取文本每行内容,每次输出100行,并且可以翻页输出

PHP 讀取文本每行內容,每次輸出100行,並且可以翻頁輸出 語言筆記 PHP

現在有一個txt文件,裏面有100萬個標題,一行一個,我每次訪問時會傳回來一個pageid,pageid爲1的時候,就輸出文件裏面第一到一百個標題,pageid爲2時,就輸出第一百零一到兩百的標題,一次類推,PHP代碼呢,也很簡單:🔒 隱藏內容:會員可查看&lt;?php // 打開標題文件 $ha…
👁 173
资源网站typecho001模板

資源網站typecho001模板 程序筆記 Typecho

typecho001模板板本請勿修改本模板文件夾名稱 文件夾名稱爲:typecho001 1.4修復文章頁面js輸出問題1.3修復未安裝插件時的報錯提示優化列表頁代碼輸出1.2修復評論功能增加自定義首頁標題1.1修復評論回覆不對稱功能添加首頁單獨的標題設置功能增加網站favicon.ico圖標增加一…
👁 198