微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

用jsonp解决easyui 跨域问题

服务端servlet代码片段:

/**
 * 处理请求
 * @throws IOException 
 */
private void requestManage(HttpServletRequest req,HttpServletResponse res) throws IOException{
	//配置编码类型
	res.setContentType("text/html;charset=UTF-8;pageEncoding=UTF-8");  //控制浏览器的编码行为
	res.setCharacterEncoding("UTF-8");//目的是用于response.getWriter()输出的字符流的乱码问题,如果是response.getoutputStream()是不需要此种解决方案的;因为这句话的意思是为了将response对象中的数据以UTF-8解码后发向浏览器;
	res.setHeader("content-type","text/html;charset=UTF-8");	
	req.setCharacterEncoding("UTF-8");	
	String jason="{\"currentNumber\":10,\"pageNo\":1,\"pageSize\":10,\"rows\":[{\"email\":\"zhubj1@gmail.com\",\"firstname\":\"fname1\",\"id\":3,\"lastname\":\"lname1\",\"phone\":\"(000)000-0000\",\"valid\":true},{\"email\":\"name2@gmail.com\",\"firstname\":\"fname2\",\"id\":4,\"lastname\":\"lname2\",{\"email\":\"name3@gmail.com\",\"firstname\":\"fname3\",\"id\":5,\"lastname\":\"lname3\",{\"email\":\"name4@gmail.com\",\"firstname\":\"fname4\",\"id\":7,\"lastname\":\"lname4\",{\"email\":\"name5@gmail.com\",\"firstname\":\"fname5\",\"id\":8,\"lastname\":\"lname5\",{\"email\":\"name6@gmail.com\",\"firstname\":\"fname6\",\"id\":9,\"lastname\":\"lname6\",{\"email\":\"name7@gmail.com\",\"firstname\":\"fname7\",\"id\":10,\"lastname\":\"lname7\",{\"email\":\"name8@gmail.com\",\"firstname\":\"fname8\",\"id\":11,\"lastname\":\"lname8\",{\"email\":\"name9@gmail.com\",\"firstname\":\"fname9\",\"id\":12,\"lastname\":\"lname9\",{\"email\":\"name10@gmail.com\",\"firstname\":\"fname10\",\"id\":13,\"lastname\":\"lname10\",\"valid\":true}],\"total\":11,\"totalPages\":2}";
	String callback=req.getParameter("callback");//得到回调函数名  
	System.out.println(callback);
	res.getWriter().write(callback+"("+jason+")");//封装成 回调函数名(data)形式  
}


前端:

url="http://localhost:8888/study/test"  为跨域调用
<table id="dg1" title="用户管理" class="easyui-datagrid" style="width:100%;height:100%px"
			url="http://localhost:8888/study/test"  
			toolbar="#toolbar" pagination="true"
			rownumbers="true" fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<th field="firstname" width="50">姓</th>
				<th field="lastname" width="50">名</th>
				<th field="phone" width="50">电话</th>
				<th field="email" width="50">Email</th>
				<th field="classno" width="50">班级</th>
				
			</tr>
		</thead>
	</table>



js代码片段:

在jquery.easyui.min.js中增加一个跨域调用的js函数

$.ajax({type:opts.method,url:opts.url,data:_7ff,dataType:"jsonp",success:function(data){

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐