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

1年前发布

02414

留言表单

`1`	`<form onsubmit="return submsg(this);">`

`2`	`联系人<input` `type="text"` `name="contacts"` `required` `id="contacts">`

`3`	`手　机<input` `type="text"` `name="mobile"` `required` `id="mobile">`

`4`	`内　容<textarea name="content"` `id="content"></textarea>`

`5`	`验证码<input` `type="text"` `name="checkcode"` `required` `id="checkcode">`

`6`	`<img title="点击刷新"` `src="{pboot:checkcode}"` `onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);"` `/>`

`7`	`<button` `type="submit">提交留言</button>`

8 </form>

Ajax提交

`01`	`<script>`

`02`	`//ajax提交留言，由于涉及到提交地址标签的解析，JS需要放在html文件中`

`03`	`function` `submsg(obj){`

`04`	`var url='{pboot:msgaction}'; //如果是自定义表单则使用地址{pboot:form fcode=*}`

`05`	`var contacts=$(obj).find("#contacts").val();`

`06`	`var mobile=$(obj).find("#mobile").val();`

`07`	`var content=$(obj).find("#content").val();`

`08`	`var checkcode=$(obj).find("#checkcode").val();`

09

`10`	`$.ajax({`

`11`	`type:` `'POST',`

`12`	`url: url,`

`13`	`dataType:` `'json',`

14 data: {

`15`	`contacts: contacts,`

`16`	`mobile: mobile,`

`17`	`content: content,`

`18`	`checkcode: checkcode`

19 },

`20`	`success:` `function` `(response, status) {`

`21`	`if(response.code){`

`22`	`alert("谢谢您的反馈，我们会尽快联系您！");`

`23`	`$(obj)[0].reset();`

24 }else{

`25`	`alert(response.data);`

26 }

27 },

`28`	`error:function(xhr,status,error){`

`29`	`alert('返回数据异常！');`

30 }

31 });

`32`	`return` `false;`

33 }

`34`	`</script>`

© 版权声明

文章版权归作者所有，未经允许请勿转载。

THE END

综合资源
# 数据

喜欢就支持一下吧

相关推荐

评论抢沙发

欢迎您留下宝贵的见解！

提交

暂无评论内容

随即推荐

汉字转拼音v1.0 支持导出excel word小工具-铁虎资源网

汉字转拼音v1.0 支持导出excel word小工具

功能很简单，就是汉字转拼音，使用的pinyin4net拼音转换库，并在此基础上做了一些功能扩展。

JuliaPen8天前

02112

英雄连3/Company of Heroes 3/策略战棋

英雄连3/Company of Heroes 3/策略战棋-铁虎资源网

英雄连3/Company of Heroes 3/策略战棋-铁虎资源网

英雄连3/Company of Heroes 3/策略战棋-铁虎资源网

英雄连3/Company of Heroes 3/策略战棋-铁虎资源网

test361524115天前

04414

WordPress主题–Betheme v28.1.12 破解版下载-铁虎资源网

WordPress主题–Betheme v28.1.12 破解版下载

Betheme 想要构建的不仅仅是一个 WordPress 主题，它可以轻松适应您需要处理的任何项目，而无需编写任何代码。一个从头开始设计的主题，以节省您的时间并帮助您享受自由……

zxy202312天前

04314

首发交友盲盒V3系统-铁虎资源网

首发交友盲盒V3系统

🌸发布啦！全新「交友盲盒」系统，市面上最好用的盲盒系统！🌸 📦 盲盒玩法：上线就能“抽对象”“投递自我”，每一次点击都像拆封惊喜。 💌 群聊秒开：自带内置聊天室，发图发视频都流畅，后台...

wtf080807天前

0295

零基础人工智能课AI学习30天入门人工智能-铁虎资源网

零基础人工智能课AI学习30天入门人工智能

如何快速入门人工智能？

test311426026天前

02511

万能教辅资料下载支持中小学教材习题及课件-铁虎资源网

万能教辅资料下载支持中小学教材习题及课件

RDJ教辅资源下载器是一款集合了各个教育平台资源的资源网罗的神器。它覆盖了1到9年级的所有资源，支持选择年级、科目、版本以及册别，非常方便。只需右键点击，即可快速下载所需的教辅资料，寒...

鹿鸣荐3天前

02011

抖音视频播放器源码-铁虎资源网

抖音视频播放器源码

抖音视频播放器源码功能概述· 随机/顺序播放抖音视频· 点赞收藏管理· 移动端优化· 数据持久化存储快速开始 1. 环境要求· PHP 7.0+· 支持cURL· Web服务器 2. 文件部署项目文件/├── in...

Prof40avalt21天前

03611

安卓抖音v36.8.0 去水印下载内置助手增强版-铁虎资源网

安卓抖音v36.8.0 去水印下载内置助手增强版

原创音乐短视频分享平台。潮流音乐、搭配舞蹈、表演等内容形式，还有超多原创特效、滤镜、场景切换等，帮你打造刷爆朋友圈的魔性短视频！脑洞有多大，舞台就有多大！好玩的人都在这里！

手机版软件

test351948746天前

03714

WordPress主题–Thrive Theme Builder v10.8.3 破解版+Shapeshift-铁虎资源网

WordPress主题–Thrive Theme Builder v10.8.3 破解版+Shapeshift

Thrive Theme是一款WordPress多功能主题。此主题带有可视化的页面构建器，类似于Elementor之类的功能。

Prostokva__ivol13天前

04010

RAKsmart液冷技术如何实现PUE

传统数据中心因依赖风冷技术，能源使用效率(PUE)普遍在1.5以上，导致大量电力被用于散热而非计算本身。面对“双碳”目标与可持续发展的紧迫需求，RAKsmart凭借其创新的液冷技术，成功...

admin28天前

0487