Jsonp跨域

最新推荐文章于 2024-09-27 00:45:01 发布

期待到吃饭

最新推荐文章于 2024-09-27 00:45:01 发布

阅读量98

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_45194258/article/details/92851674

版权

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'>&laquo;</span></a></li>";
                    }else{//当前页码不为1时,将可以进行上一页或者下一页,因此需要绑定事件
                           pageMsg+="<li><a href='#' aria-label='Previous' onclick='find("+ (pageNo-1)+ ")'><span aria-hidden='true'>&laquo;</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'>&raquo;</span></a></li>";
                    }else{//当前页码不为最后一页时,将可以进行上一页或者下一页,因此需要绑定事件
                           pageMsg+="<li><a href='#' aria-label='Next'><span aria-hidden='true' onclick='find("+ (pageNo+1)+ ")'>&raquo;</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);
    }

}