最近在写一个
wap
网站,它是由服务器端提供一个接口,如:
http://192.168.1.122:8080/waptest1/indexImg.do
然后由在jsp页面中解析json数组并获得相应属性值。
等到了正式环境下我把
url
换成远程的
http://mobile.51bi.com/indexImg.do
(见上传图片附件)
jsp
就访问不到数据了,我上网查了一下是
Ajax
跨域访问的问题。
解决:先通过
servlet
取出数据再交给
jsp,通过servlet中转了一下。
jsp代码:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<title>My JSP 'mlkindex.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/mlkindex.css">
<script type='text/javascript' src='js/jquery-latest.js'></script>
<script type="text/javascript">
var url="<%=request.getContextPath()%>/MlkIndexServlet
";
var curIndex=0;
var arr=new Array();
$(function() {
$.post(url,function(data){
var json=eval("(" + data + ")");
for(var i=0;i<json["indexImg"].length;i++){
var temp=json["indexImg"][i];
arr[i]=temp.picture;
}
var pic='<img onclick="changeImg(this.id);" class="imgs" id="obj" src="'+json["indexImg"][0].picture+'" />';
$("#adimgs").html(pic);
});
});
function changeImg(obj){
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
<script type="text/javascript">
$(function() {
$.post('http://192.168.1.122:8080/waptest1/MlkIndex2Servlet',function(data2){
var json2=eval("(" + data2 + ")");
var cai=json2["shareList"][4].msource;
var nav='<div class="test1"><table border=0 cellpadding=10 cellspacing=0 align="center"><tr>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?id='+json2["shareList"][0].id+'&msource='+json2["shareList"][0].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][0].picture+'"></img></a><br/><font color=#FF66FF>衣衣不舍</font></td>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?id='+json2["shareList"][1].id+'&msource='+json2["shareList"][1].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][1].picture+'"></img></a><br/><font color=#FF66FF>时尚潮包</font></td>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?id='+json2["shareList"][2].id+'&msource='+json2["shareList"][2].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][2].picture+'"></img></a><br/><font color=#FF66FF>最in美鞋</font></td>';
nav=nav+'</tr>';
nav=nav+'<table border=0 cellpadding=10 cellspacing=0 align="center"><tr>';
nav=nav+'<td><a href="mlk/caizhuang.jsp?id='+json2["shareList"][3].id+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][3].picture+'"></img></a><br/><font color=#FF66FF>美妆护肤</font></td>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?page=1&id='+json2["shareList"][4].id+'&msource='+json2["shareList"][4].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][4].picture+'"></img></a><br/><font color=#FF66FF>诗意家居</font></td>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?id='+json2["shareList"][5].id+'&msource='+json2["shareList"][5].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][5].picture+'"></img></a><br/><font color=#FF66FF>甜美饰物</font></td>';
nav=nav+'</tr></div>';
$("#mlknav").html(nav);
});
});
</script>
</head>
<body>
<div class="head3">
<div class="head1">
<div class="back1"><input type="submit" value="返回" onclick="javascript :history.go(-1);"></div>
<div class="mlkicon"><a href="#"><img src="images/mlkindex/logo.jpg"/></a></div>
</div>
<!-- 四张轮换图片 -->
<div class="head2">
<div id="adimgs"></div>
</div>
</div>
<!--美丽控首页六张导航图片 -->
<div id="mlknav">
</div>
</body>
</html>
****************************************************
servlet代码:
注:
此处亦可参照本人的这篇文章:
http://chenzheng8975.iteye.com/blog/1602301
package mlk.test.controller;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.URL;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MlkIndexServlet extends HttpServlet {
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
URL url = new URL("http://mobile.51bi.com/indexImg.do
");
InputStream is = url.openStream();
byte[] b = new byte[is.available()];
is.read(b);
String resultString=new String(b, "utf-8");
String tempString=new String(resultString.getBytes("iso-8859-1"),"utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
System.out.println(resultString);
out.print(resultString);
is.close();
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
- 大小: 112.7 KB
分享到:
相关推荐
这个就么问题了,成功实现跨域读JSON,然后自定义显示天气预报。
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
ajax 跨域 jsonp等方式
实现jquery ajax跨域。前台页面 和 java代码类
你需要获取其他网站的数据吧,ajax跨域获取数据帮你实现。
很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器...
NULL 博文链接:https://8366.iteye.com/blog/744057
jQuery使用ajax跨域获取数据
通过JQuery可以跨域获取JSON数据,但必须弄清楚的是,JQuery不可以跨域获取任意JSON格式的数据,必须要通过服务端输出特定的针对JQuery跨域读取的JSON数据。你可能目前对此仍然毫无了解,没关系,本文将以最简单易懂...
Ajax跨域问题及其解决方案.docx
Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 这篇文章主要介绍了AJAX跨域请求JSONP获取JSON数据的实例代码,需要的朋友可以参考下
本资源主要介绍了AJAX跨域的解决办法,以及解决方案间的比较
一个c# ajax跨域的demo,解决c# ajax 跨域的问题
使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。
基于HTML5+CSS3的一个小程序,适合新手学习,主要用了跨域取json的方法
NULL 博文链接:https://x125858805.iteye.com/blog/2215862
关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器”同源策略”中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下: 什么是ajax跨域 o原理 o表现...