Ajax请求案例

1 表单内容

<form method="post" class="J_ajaxForms" name="form1">
   <div class="info">
        <ul class="mycol mycol-3 clearfix">
	<li class="col"><input name="name" id="name" type="text" placeholder="您的姓名："></li>
	<li class="col"><input name="phone" id="phone" type="text" placeholder="联系电话："></li>
	<li class="col"><input name="email" id="email" type="text" placeholder="邮箱地址："></li>
        </ul>
   </div>
   <textarea name="content" placeholder="详细......" id="content"></textarea>
   <div class="more clearfix">
          <a href="javascript:;" class="hover-circle-big fl" id="submitbtn">立即留言</a>
    </div>
</form>

2 JS内容

<!-- 提交表单数据 -->
<script>
     layui.use(['layer', 'form'], function () {
            var layer = layui.layer;
            var form = layui.form;

            $('#submitbtn').click(() => {

	  // 获取数据
	  var data = {
	        name: $('#name').val(),
	        phone: $('#phone').val(),
	        email: $('#email').val(),
	        content: $('#content').val()
	  };

	 // 检测数据
	 if (typeof (data.name) == "undefined" || data.name == '' || data.name == null || data.name.trim() == '') {
	        layer.msg('姓名不能为空', { icon: 2, time: 1500 }, () => {
	               $('#name').val('');
	               $('#name').focus();
	        });
	        return false;
	 }
	 if (typeof (data.phone) == "undefined" || data.phone == '' || data.phone == null || data.phone.trim() == '') {
	        layer.msg('电话不能为空', { icon: 2, time: 1500 }, () => {
	               $('#phone').val('');
	               $('#phone').focus();
	        });
	        return false;
	 }
	 if (typeof (data.content) == "undefined" || data.content == '' || data.content == null || data.content.trim() == '') {
	        layer.msg('详情不能为空', { icon: 2, time: 1500 }, () => {
	               $('#content').val('');
	               $('#content').focus();
	        });
	        return false;
	 }

	 // 发起请求
	 $.ajax({
	        url: "{:url('home/Contact/addLiuyan')}",
	        data,
	        method: 'POST'
	 }).then(({ code, msg, data }) => {
	        if (code === 1) {
	               layer.msg(msg, { icon: 1, time: 1500 }, () => {
		      location.reload();
	               });
	               return false;
	        } else {
	               layer.msg(msg, { icon: 2, time: 1500 });
	               return false;
	        }
	 })
	 return false;
           });
     });
</script>

3 后台处理

// 留言信息
public function addLiuyan()
{
	if(request()->isPost()){
		// 接收数据
		$data = [
			'name' => input('name',''),
			'phone' => input('phone',''),
			'email' => input('email',''),
			'content' => input('content','')
		];
		// 验证数据
		$rule = [
		    'name'  	=> 'require|max:25',
		    'phone' 	=>  ['require','regex:/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/'],
		    'email' 	=> 'email',
		    'content' 	=> 'require'
		];
		$msg = [
		    'name.require' 		=> '姓名不能为空',
		    'name.max'     		=> '姓名最多不能超过25个字符',
		    'phone.require'   	=> '电话不能为空',
		    'phone.regex'   	=> '电话格式错误',
		    'email.email'       => '邮箱格式错误',
		    'content.require'   => '详情不能为空'
		];
		$validate = new Validate($rule, $msg);
		$result   = $validate->check($data);
		if(!$result){
		    return json(['code' => 0, 'msg' => $validate->getError(), 'data' => []]);
		}
		// 添加数据
		$data['create_time'] = time();
		$data['update_time'] = time();
		$res = Db::name('liuyan')->insert($data);
		// 返回数据
		if (!empty($res)) {
			return json(['code' => 1, 'msg' => '留言成功', 'data' => []]);
		}
		return json(['code' => 0, 'msg' => '留言失败', 'data' => []]);
    }
    return json(['code' => 0, 'msg' => '请求类型错误', 'data' => []]);
}