1. 什么是跨域
跨域它是不同的域名(服务器)之间的相互的资源的访问。
当协议，域名，端口号任意一个不相同，它们就是不同的域。
正常情况下，因为浏览器安全问题，不同域的资源是不可以访问的。
跨域解决方案
有三种解决方案:
1.代理方案前端页面访问本地的服务器，本地服务器访问其它域的资源，它是服务器端的跨域问题解决。(这种方式就是前端访问本项目的servlet,然后servlet跳转到其他服务器的页面,也就是重定向)
2.jsonp JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jsonp跨域请求(jsonp项目下的前端页面去访问json项目下的CommodityServlet)</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("a").toggle(function () {
var tab=$("<table border='1'></table>");
var tr=$("<tr><td>编号</td><td>名称</td><td>数量</td><td>金额</td></tr>");
$("#d").append(tab);
$(tab).append(tr);
var url="http://localhost:8080/json/CommodityServlet?callback=?";
$.getJSON(url,function(data){
var obj=eval（data);
for(var i=0;i<obj.length;i++){
var os=obj[i];
var tri=$("<tr><td>"+os.id+"</td><td>"+os.name+"</td><td>"+os.count+"</td><td>"+os.price+"</td></tr>");
$(tab).append(tri);
}
});
$("#d").fadeIn(3000);
},function () {
$("#d").fadeOut(3000);
$("#d").html("");
})
});
</script>
<body>
<a href="#">显示商品信息</a>
<div id="d">
</div>
</body>
</html>
package com.itheima.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
import com.itheima.model.Commod;
/**
* 显示商品信息
*/
public class CommodityServlet extends HttpServlet {
private List<Commod> list;
@Override
public void init() throws ServletException {
list=new ArrayList<>();
Commod c1=new Commod(1,"电视机",100,2000);//int id, String name, int count, double price
Commod c2=new Commod(2,"洗衣机",200,1000);
Commod c3=new Commod(3,"空调",150,1500);
Commod c4=new Commod(4,"冰箱",160,500);
list.add(c1);
list.add(c2);
list.add(c3);
list.add(c4);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String callback = request.getParameter("callback");
response.setCharacterEncoding("UTF-8");
String jsonString = JSONObject.toJSONString(list);
response.getWriter().println(callback+"("+jsonString+")");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
发送给前端的数据为这个:
{"content":[{"count":100,"id":1,"name":"?”μè§???o","price":2000},
{"count":200,"id":2,"name":"?′—è?￡??o","price":1000},
{"count":300,"id":3,"name":"??oè°?","price":3000},
{"count":50,"id":4,"name":"?????±??a","price":2000},
{"count":100,"id":5,"name":"HP?”μè?‘","price":4000}],
"pageNo":1,"pageSize":5,"totalCount":11,"totalPage":3}
public class PageBean {
private int pageNo;//当前页码
private int pageSize;//每页条数
private int totalCount;//总条数
private int totalPage;//总页码
List<Product> content;//将当前页展示的数据封装到这个集合里面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>分页展示数据</title>
<link href="/jquery_paging/css/bootstrap.min.css" rel="stylesheet">
<script src="/jquery_paging/js/jquery-1.11.3.js"></script>
<script src="/jquery_paging/js/bootstrap.min.js"></script>
<script type="text/javascript">
var pageNo=1;
var pageSize=5;
var totalCount=0;
var totalPage=5;
$(function() {
find(pageNo);
});
function find(pageNum) {
//最后清空里面的数据,以免翻页出现数据累加
$("#d").html("<div align='center' id='d' ><table border='1' id='tab' style='height: 70%;width: 60%'><tr><td>编号</td><td>名称</td><td>数量</td><td>价格</td></tr></table></div>");
pageNo = pageNum;//动态获取传进来的当前页码
var url="/jquery_paging/ProductServlet";
$.post(url,{"pageNo":pageNo,"pageSize":pageSize},function(data){
var jsonObj=eval（data);
var obj=jsonObj.content;//获取传过来的数据
pageNo=jsonObj.pageNo;//这个参数没有用到
pageSize=jsonObj.pageSize;//每页条数
totalCount=jsonObj.totalCount;//总记录数
totalPage=jsonObj.totalPage;//总条数=总记录数/每页条数
for(var i=0;i<obj.length;i++){//遍历数据,然后添加到table表格中
$("#tab").append("<tr><td>"+obj[i].id+"</td><td>"+obj[i].name+"</td><td>"+obj[i].count+"</td><td>"+obj[i].price+"</td></tr>");
}
var pageMsg="<nav><ul class='pagination'>";//分页条
if(pageNo==1){//当前页码为1时,上一页图标无法选中
pageMsg+="<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>«</span></a></li>";
}else{//当前页码不为1时,将可以进行上一页或者下一页,因此需要绑定事件
pageMsg+="<li><a href='#' aria-label='Previous' onclick='find("+ (pageNo-1)+ ")'><span aria-hidden='true'>«</span></a></li>";
}
for(var i=0;i<totalPage;i++){
if(i+1==pageNo){//当前i+1为当前页码时,将高亮显示
pageMsg+="<li class='active'><a href='#' onclick='find("+ (i+1)+ ")'>"+(i+1)+"</a></li>";
}else{
pageMsg+="<li><a href='#' onclick='find("+ (i+1)+ ")'>"+(i+1)+"</a></li>";
}
}
if(pageNo==totalPage){//当前页码为最后一页时,下一页图标无法选中
pageMsg+="<li class='disabled'><a href='#' aria-label='Next'><span aria-hidden='true'>»</span></a></li>";
}else{//当前页码不为最后一页时,将可以进行上一页或者下一页,因此需要绑定事件
pageMsg+="<li><a href='#' aria-label='Next'><span aria-hidden='true' onclick='find("+ (pageNo+1)+ ")'>»</span></a></li>";
}
pageMsg+="</ul></nav>";
$("#d").append(pageMsg);//最后追加到div中
},"json");
}
</script>
</head>
<body>
<div align="center" id="d" >
<table border="1" id="tab" style="height: 70%;width: 60%">
<tr>
<td>编号</td>
<td>名称</td>
<td>数量</td>
<td>价格</td>
</tr>
</table>
</div>
</body>
</html>
package com.ithiema.web;
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
import com.ithiema.domain.PageBean;
import com.ithiema.service.ProductService;
/**
* Servlet implementation class ProductServlet
*/
public class ProductServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
int pageNo=Integer.parseInt(request.getParameter("pageNo"));//当前页数
int pageSize=Integer.parseInt(request.getParameter("pageSize"));//每页条数
try {
PageBean pb = ProductService.findAll(pageNo,pageSize);
String json = JSONObject.toJSONString(pb);
response.getWriter().println(json);
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
