EasyUI的Form表单异步提交问题-ThinkPHP5对EasyUI异步表单不返回json

今天整合TP5和EasyUI发现Chrome报了一个警告:Resource interpreted as Document but transferred with MIME type application/json

记得刚学TP框架的时候还是3.2.3一眨眼版本已经更新到5.0了,不得不让人感慨IT行业发展之迅猛!

话不多说,直接进入正题:

这次分享的是前端EasyUI做的画面,提交异步表单时候,后台TP5处理的一些问题,问题背景如下:

前端:

$("#form").form({
onSubmit:function(param){
console.log("onSubmit");
return true;
},
success:function(res){
console.log(res);
console.log(JSON.parse(res));
}
});

很明显,这是一个使用easyui的异步提交模板,

后台:

public function cud_clerk(){
$form=input('');
$this->success("提交成功",null,$form);
}

这里注意一个问题,不像官方文档所说:

error方法会自动判断当前请求是否属于

Ajax

请求，如果属于

Ajax

请求则会自动转换为

default_ajax_return

配置的格式返回信息。
success在

Ajax

请求下不返回信息，需要开发者自行处理。

我使用的这个版本,success同样会对请求类型进行判断的!
这样使用问题会有两个:

1. 在form的success方法中,参数res为一段html代码

2. 如果后台改成json返回,浏览器会报一个警告:Resource interpreted as Document but transferred with MIME type application/json

简要说明一下原因:

问题1产生的原因是在于EasyUI的异步表单底层是创建一个iframe,从而使得这样的异步提交能上传文件,很明显这样的情况TP自然不能识别其为Ajax提交类型,故而success和error就会返回渲染后的两个模板;

问题2很同样很明显,就和你在页面中使用form后会跳转一个html页面一样容易理解.

解决方案:

对于问题1,熟悉框架[这个时候的tp5已经是依葫芦画Laraval一系列的主流框架了:) ]的都应该知道有伪装请求这样的东西,修改前端代码:

$("#form").form({
onSubmit:function(param){
param._ajax='1';//添加这行,伪装成ajax访问
console.log("onSubmit");
return true;
},
success:function(res){
console.log(res);
console.log(JSON.parse(res));
}
});

对于问题2,如果查看一下源码的话会发现success方法的原型:

/**
* 操作成功跳转的快捷方法
* @access protected
* @param mixed     $msg 提示信息
* @param string    $url 跳转的URL地址
* @param mixed     $data 返回的数据
* @param integer   $wait 跳转等待时间
* @param array     $header 发送的Header信息
* @return void
*/
protected function success($msg = '', $url = null, $data = '', $wait = 3, array $header = []);

没错,就是header,请求伪装强制响应!修改后台代码:

$this->success("ajax提交",null,$form,3,["Content-Type"=>"text/html;"]);

这里不考虑OOP和设计模式的一些东西,就算是巧妙的解决了问题!

每一个有心去看框架内核,底层原理的程序员都值得肯定,因为念念不忘,必有回响!