【PHP】ThinkPHP5+EasyUI异步表单中的JSON解析问题记录_tp5 视图解析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));
	}
});	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和设计模式的一些东西,就算是巧妙的解决了问题!

 

 

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