58 CMS教程 pbootcms使用教程 2021-10-12 15:36:35

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

留言表单

查看源码
							
打印代码帮助

											1
										
											<form onsubmit="return submsg(this);">
										
											2
										
											    联系人<inputtype="text"name="contacts"requiredid="contacts">
										
											3
										
											    手 机<inputtype="text"name="mobile"requiredid="mobile">
										
											4
										
											    内 容<textarea name="content"id="content"></textarea>
										
											5
										
											    验证码<inputtype="text"name="checkcode"requiredid="checkcode">
										
											6
										
											    <img title="点击刷新"src="{pboot:checkcode}"onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);"/>
										
											7
										
											    <buttontype="submit">提交留言</button>
										
											8
										
											</form>

Ajax提交

查看源码
							
打印代码帮助

											01
										
											<script>
										
											02
										
											//ajax提交留言，由于涉及到提交地址标签的解析，JS需要放在html文件中
										
											03
										
											functionsubmsg(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
										
											  returnfalse;
										
											33
										
											}
										
											34
										
											</script>

58

分享到：

58

简简单单挺好的