IT技术博客网IT技术博客网IT技术博客网

当前位置: 首页 > 前端

tp5中使用ajax提交表单消息弹窗渐变显示并跳转的完整代码demo

TP5中用ajax执行表单提交共需三个文件

html页、

ajax提交页、

消息弹窗的function功能函数-这里全站引用success()和error()


html页面完整代码

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        window.history.replaceState(null, null, window.location.href);
                function tijiao() {
                    $.ajax({
                        type: "POST",
                        url: "{:url('user/user_edit_ajax')}",
                        data: $('#ajax_form').serialize(),
                        success: function(result) {
                        $('#alertMessage').html(result);
                        $('#alertMessage').fadeIn(1000); //延时2秒后渐显元素 
                        $('#alertMessage').fadeOut(3000);  //延时2秒后渐显元素 
                        function tiaourl(){
                          window.location.href = '{:url("user/index")}';
                          }
                          setTimeout(tiaourl,3000);
                        },
                        error: function(result) {
                        $('#alertMessage').html(result);  
                        $('#alertMessage').fadeIn(1000); //延时2秒后渐显元素 
                        $('#alertMessage').fadeOut(3000);  //延时2秒后渐显元素 
                        }
                    });
                }
    </script>
    
    
<div id="alertMessage" style="display: none;"></div><!-- 这里会插入弹窗的div -->


<form class="form-horizontal" role="form" action="###" method="post" id="ajax_form">
    <input type="hidden" name="user" value="{$result.user}">
    <input type="hidden" name="id" value="{$result.id}">
     <div class="form-group">
          <label for="user" class="col-sm-2 control-label no-padding-right">登录账号</label>
               <div class="col-sm-6">
                <input class="form-control" id="user" placeholder="{$result.user}" required="" type="text" disabled>
                </div>
      </div>
                        <div class="form-group">
                            <label for="mima" class="col-sm-2 control-label no-padding-right"  title="密码已使用特殊算法加密" >密码&nbsp;&nbsp;<i class="fa fa-info-circle"></i></label>
                            <div class="col-sm-6">
                                <input class="form-control" id="mima" placeholder="" value="{$result.password}" name="mima" required="" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="xingming" class="col-sm-2 control-label no-padding-right">真实姓名</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="xingming"  placeholder="" name="xingming" value="{$result.name}" required="" type="text">
                            </div>
                        </div>
</form>
<--这里防止消息弹窗自动取消,所以button放在form之外 -->
<div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default"  onclick="tijiao()" >保存信息</button>
                        </div>
</div>


ajax接收页面完整代码-我表单的用处是 修改管理员信息

// 修改管理员 ajax
	public function user_edit_ajax()
	{
		if (db('user')->where('user',input('user'))->where('password',input('mima'))->count() > 0) {
			// 密码不改变
			db('user')->where('user', input('user'))->update(['name' => input('xingming')]);
			return success('账号信息修改成功');
		}else{
			// 密码改变
			if (db('user')->where('id', input('id'))->update(['name' => input('xingming'),'password'=>md5(input('mima'))]) != false) {
				return success('账号信息修改成功');
			}else{
				return error('账号信息修改失败');
			}
		}
	}


function.php的公共函数代码-tp5的公共函数我放在application->extra文件夹内

function success($result)
{
	$message = '<div style="position: fixed;z-index: 999;left: 0;right: 0;margin-left: auto;margin-right: auto; width: 350px;height: 100px;background: #fff;    box-shadow: 1px 2px 5px #9E9E9E;top: 50vh;margin-top: -120px;text-indent: 1em;"><p style="width: 100%;background: red;background: #2dc3e8;font-size: 14px;line-height: 30px;height: 30px;color: #fff;">消息提示!<span style="font-size:24px;float: right;margin-right: 10px;margin-top: -3px;cursor: pointer;" id="close">×</span></p><p style="font-size:14px;">'.$result.'<i class="fa fa-check" style="font-size: 32px;color: red;"></i></p></div>';
	return $message;
}

function error($result)
{
	$message = '<div style="position: fixed;z-index: 999;left: 0;right: 0;margin-left: auto;margin-right: auto; width: 350px;height: 100px;background: #fff;    box-shadow: 1px 2px 5px #9E9E9E;top: 50vh;margin-top: -120px;text-indent: 1em;"><p style="width: 100%;background: red;background: #2dc3e8;font-size: 14px;line-height: 30px;height: 30px;color: #fff;">消息提示!<span style="font-size:24px;float: right;margin-right: 10px;margin-top: -3px;cursor: pointer;" id="close">×</span></p><p style="font-size:14px;">'.$result.'<i class="fa fa-check" style="font-size: 32px;color: red;"></i></p></div>';
	return $message;
}


ok,注意ajax别忘记引用核心js




技术QQ交流群:157711366

技术微信:liehuweb

写评论