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="密码已使用特殊算法加密" >密码 <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
写评论