thinkphp处理jQuery EasyUI form表单问题
jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提交,提交时只刷新iframe里面的页面,而在iframe外面的页面看来就像是异步提交了,这样做有一个好处——能上传文件或者图片,因为ajax方式是无法上传文件的。但是jquery的form方法处理响应返回值(比如json)的时候没有像ajax、get、post这几个方法方便,如果处理json响应需要自己调用eval来转换成js的json对象,像下面这样:
$('#info_form').form({ url: 'process.php', onSubmit: function(){ // do some check // return false to prevent submit; }, success:function(data){ var data = eval('(' + data + ')'); // change the JSON string to javascript object if (data.success){ alert(data.message) } } }); // submit the form $('#info_form').submit();
上面这段代码是处理这种格式的json:
{ "success": true, "message": "Message sent successfully." }
上面说的这些不会出什么问题,出问题是在thinkphp里面,熟悉thinkphp的人应该知道Controller.class.php里面有两个函数success和error,这两个函数很方便响应ajax请求,提供JSON、XML、JSONP等格式,如果用这两个函数来响应EasyUI的form请求那就会出问题,这个问题在非IE浏览器很不容易发现,在IE浏览器下就直接出问题了,返回的响应内容不被jQuery正常解析而直接被浏览器首先判断为非文本格式就提示保存了,如下:
再来看看响应头:
可以看出响应头中Content-Type是application/json,而IE以为这不是一个可以显示的格式就提示保存了,从而就没有把响应内容交给jQuery来处理。chrome浏览器只是提示一个告警(Resource interpreted as Document but transferred with MIME type application/json)后依然把响应交给jQuery来处理,所以就感觉像是正常的。因为Controller.class.PHP的两个函数success和error最终调用的是ajaxReturn,所以直接修改ajaxReturn,把header('Content-Type:application/json; charset=utf-8')修改成header('Content-Type:text/html; charset=utf-8'),这回IE浏览器也正常了,但这么改可能会影响其他代码,所以就直接加一个类型EVAL,改后的ajaxReturn如下:
/** * Ajax方式返回数据到客户端 * @access protected * @param mixed $data 要返回的数据 * @param String $type AJAX返回数据格式 * @return void */ protected function ajaxReturn($data,$type='') { if(empty($type)) $type = C('DEFAULT_AJAX_RETURN'); switch (strtoupper($type)){ case 'JSON' : // 返回JSON数据格式到客户端 包含状态信息 header('Content-Type:application/json; charset=utf-8'); exit(json_encode($data)); case 'XML' : // 返回xml格式数据 header('Content-Type:text/xml; charset=utf-8'); exit(xml_encode($data)); case 'JSONP': // 返回JSON数据格式到客户端 包含状态信息 header('Content-Type:application/json; charset=utf-8'); $handler = isset($_GET[C('VAR_JSONP_HANDLER')]) ? $_GET[C('VAR_JSONP_HANDLER')] : C('DEFAULT_JSONP_HANDLER'); exit($handler.'('.json_encode($data).');'); case 'EVAL' : // 返回可执行的js脚本 header('Content-Type:text/html; charset=utf-8'); exit(is_array($data) ? json_encode($data) : $data); default : // 用于扩展其他返回格式数据 Hook::listen('ajax_return',$data); } }
调用ajaxReturn时把$type设成EVAL就可以了。
相关文章
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
- Extend ComboGrid Editors for DataGrid Of JQuery EasyUI
- jquery easyui datebox 的使用
- 关于ecshop中jquery与js冲突解决的方案
- jquery-easyui:如何设置组件属性
- jQuery post数据至ashx
- jquery下载所有版本(实时更新)
- jQuery之简单的表单验证
- jquery easyui toolbar 分割线问题
- jquery easyui datagrid js获取记录数 页数 当前页
- 如何让jquery-easyui的combobox像select那样不可编辑
- 如何通过jQuery的css方法添加带有!important标记的样式
- 浅析jQuery基本结构($实现原理)
- Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)
- Croppic – 免费开源的 jQuery 图片裁剪插件
- 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)
- jQuery EasyUI API 中文文档 - ValidateBox验证框
- 紧接上篇,jQuery调用jsonp,并且在页面上展示
- jquery easyui datagrid 分页显示总记录数
- 使用JQuery解析、处理JSON数据(应用在课程表)
- 基于jquery判断浏览器版本过低代码
- 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效
- jquery实现的个人中心导航菜单
- jQuery选择器(满足你的所有业务)
- 19前端学习之JQuery基础(三):jQuery尺寸、位置操作、jQuery事件、jQuery事件对象、Jquery拷贝对象、jQuery 多库共存、jQuery 插件