先说一下作者遇到的问题,本地开发测试都可以完美运行,一到线上就开始ajax请求浏览器给cancel,虽然这个请求cancel了,但是controller里的代码执行了
控制器代码:
public function edit_index_article(){
$old_id = $_POST['old_id'];
//加上新的
$id = intval($_POST['new_id']);
$sort = intval($_POST['sort']);
//验证问题ID
$q = DB::table('article')
->select('id')
->where(['id'=>$id])
->first();
if(!$q){
die(json_encode(['code'=>400,'msg'=>'']));
}
$this->redis->zRem($this->home_community_key,$old_id);
//添加问题
$a = $this->redis->zAdd($this->home_community_key,$sort,$id.'-a');
die(json_encode(['code'=>200,'msg'=>'']));
}
表单代码:
<form class="layui-form">
<div class="layui-form-item">
<div class="layui-input-block">
<input type="radio" name="status" value="2" title="问题" lay-filter="count-type" <?php if($status == 2){ ?> checked="checked" <?php } ?> >
<input type="radio" name="status" value="1" title="文章" lay-filter="count-type"<?php if($status == 1){ ?> checked="checked" <?php } ?> >
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">ID</label>
<div class="layui-input-inline">
<input type="" name="add_article_id" value="{{intval($id)}}" id="add_article_id" lay-verify="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<input type="" name="sort" id="sort" lay-verify="" autocomplete="off" class="layui-input">
</div>
</div>
<center> <button class="layui-btn layui-btn-primary" onclick="add_comm('{{$id}}')" >确定</button></center>
</form>
<script>
layui.use(['form'], function(){
var $ = layui.jquery
var form = layui.form;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
function add_comm(id) {
var status = $("input[name='status']:checked").val()
var add_article_id = $('#add_article_id').val();
var sort = $('#sort').val();
var reg=/^[1-9]\d*$/;
if(reg.test(sort)!==true){
alert("请输入非零的正整数");
return false;
}
if(status ==1){
$.ajax({
type: "post",
url: "/Course/edit_index_article",
data: {
'old_id':id,
'new_id':add_article_id,
'sort':sort
},
dataType: 'json',
success: function (result) {
if(result['code'] == 400){
alert('没有该帖子');
return false;
}
if(result['code'] == 200){
layer.msg('添加成功,马上刷新页面');
parent.layer.closeAll()
window.parent.location.href = '/community/index?page_type=5';
}
}
}
);
return false;
}
if(status == 2){
$.ajax({
type: "post",
url: "/Course/edit_index_question",
async: false,
data: {
'old_question_id':id,
'new_question_id':add_article_id,
'sort':sort
},
dataType: 'json',
success: function (result) {
if(result['code'] == 400){
alert('没有该帖子');
return false;
}
if(result['code'] == 200){
layer.msg('修改成功,马上刷新页面');
parent.layer.closeAll()
window.parent.location.href = '/community/index?page_type=5';
}
}
}
);
return false;
}
}
</script>
开始debug,由于数据更新成功,怀疑代码执行到ajaxreturn返回状态码挂了,修改返回格式,失败。然后怀疑是浏览器插件自动取消请求,缓存问题,都不是。
产生问题的原因:
在本地运行上边的代码的时候,控制台会有报错,并且会有两个请求如下图:
这里有两个请求一个成功了,一个取消了,并且是我们需要的那个请求成功了,经过排查,第二个请求是layui框架使用form表单后,框架本身会自动给提交表单的数据。我们并不需要这个请求,一到线上,这个请求失败导致ajax的请求也失败。
经过大佬的指定,最后确定了原因是因为 form表单里边如果包含button按钮的话,并且按钮没有指定type的时候,会默认submit,提交form表单!!!!
解决办法:
给button按钮添加type="button"
<form class="layui-form" onsubmit="return false">
给form表单添加阻止表单提交的属性。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。