使用Ajax不刷新页面留言表单提交需要编写前端页面和后端处理程序,下面是基于PbootCMS的示例代码:
在前端页面中,需要添加一个表单,并通过Ajax将表单数据提交给后端进行处理。以下是示例代码:
<form id="message-form">
<input type="text" name="name" placeholder="姓名" required>
<input type="text" name="email" placeholder="邮箱" required>
<textarea name="content" placeholder="留言内容" required></textarea>
<button type="submit">提交留言</button>
</form>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('#message-form').submit(function(e) {
e.preventDefault(); // 阻止表单默认提交行为
$.ajax({
url: '/index.php?m=message&a=save',
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function(res) {
if (res.code === 1) {
alert('留言成功');
location.reload(); // 刷新页面
} else {
alert('留言失败');
}
},
error: function() {
alert('留言失败');
}
});
});
});
</script>
以上代码中,#message-form是表单的ID,当表单提交之后,通过Ajax将表单数据提交到后端处理程序/index.php?m=message&a=save进行处理。serialize方法将表单数据序列化成字符串,作为Ajax请求的参数。如果留言提交成功,通过location.reload()刷新页面,如果留言提交失败,则提示用户留言失败。
在后端处理程序中,需要接收和处理前端提交的留言数据,并将留言数据存储到数据库中。以下是示例代码:
<?php
/**
* 留言管理控制器
*/
class MessageAction extends BaseAction
{
/**
* 保存留言
*/
public function save()
{
$data = array(
'name' => $_POST['name'],
'email' => $_POST['email'],
'content' => $_POST['content'],
'create_time' => time()
);
$msgModel = $this->model('message');
if ($msgModel->add($data)) {
echo json_encode(array('code' => 1, 'msg' => '留言成功'));
exit;
} else {
echo json_encode(array('code' => 0, 'msg' => '留言失败'));
exit;
}
}
}
以上代码中,$data数组是留言数据,通过$_POST获取前端提交的表单数据。$msgModel->add($data)将留言数据添加到数据库中。如果留言保存成功,则向前端返回'code' => 1和'msg' => '留言成功'的JSON格式数据,否则返回'code' => 0和'msg' => '留言失败'的JSON格式数据。
以上就是基于PbootCMS的使用Ajax无刷新提交留言表单的示例代码,你可以根据自己的需求进行修改和定制。
<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>
<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>
本文链接:http://task.lmcjl.com/news/2838.html