AJAX的跨域问题使用jQuery封装的JsonP的方式实现跨域------AJAX

旧约Alatus

已于 2023-11-19 10:39:47 修改

阅读量363

点赞数 4

分类专栏： # AJAX JAVA # 计算机网络文章标签： json ajax jquery 前端 java java-ee servlet

于 2023-11-18 15:19:41 首次发布

本文链接：https://blog.youkuaiyun.com/2201_75960169/article/details/134478721

版权

JAVA 同时被 3 个专栏收录

556 篇文章

订阅专栏

计算机网络

135 篇文章

订阅专栏

AJAX

45 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQJSONP</title>
</head>
<body>
    <script type="text/javascript" src="JS/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        function sayHello()
        {
            $("#myDiv").html("欢迎你:" + data.name);
        }
    </script>
    <script type="text/javascript">
        $(function()
        {
            //发送jsonp请求(假ajax请求)
            $("#btn").click(function(){
                $.ajax({
                   type : "GET",//jsonp只支持get请求
                   url : "http://localhost:8081/Test/jsonP1",
                    dataType : "jsonp",//指定是jsonp格式的数据类型
                    jsonp : "fun",//用我们自己的
                    jsonpCallback : "sayHello"//不采用默认的回调函数,我们自己写的函数
                    // success : function(data){
                    //     $("#myDiv").html("欢迎你:" + data.name);
                    // }
                });
            });
        })
    </script>
    <button id="btn">JQUERY的jsonp</button>
    <div id="myDiv"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQJSONP</title>
</head>
<body>
    <script type="text/javascript" src="JS/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        function sayHello()
        {
            $("#myDiv").html("欢迎你:" + data.name);
        }
    </script>
    <script type="text/javascript">
        $(function()
        {
            //发送jsonp请求(假ajax请求)
            $("#btn").click(function(){
                $.ajax({
                   type : "GET",//jsonp只支持get请求
                   url : "http://localhost:8081/Test/jsonP1",
                    dataType : "jsonp",//指定是jsonp格式的数据类型
                    jsonp : "fun",//用我们自己的
                    jsonpCallback : "sayHello"//不采用默认的回调函数,我们自己写的函数
                    // success : function(data){
                    //     $("#myDiv").html("欢迎你:" + data.name);
                    // }
                });
            });
        })
    </script>
    <button id="btn">JQUERY的jsonp</button>
    <div id="myDiv"></div>
</body>
</html>

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/jsonP1")
public class jsonP1 extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
//        jsonP跨域的时候只支持get请求,因为我们写src本质就是一个get请求的传递
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        //如果是输出前端代码呢?
//        out.println("alert(123);");
//        out.println("sayHello();");
        String fun = request.getParameter("fun");
//        out.println(fun + "({\"name\" : \"Jack\"});");
        out.print(fun + "({\"name\" : \"Jack\"});");
//        out.println(fun + "(5,6);");
    }
}

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/jsonP1")
public class jsonP1 extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
//        jsonP跨域的时候只支持get请求,因为我们写src本质就是一个get请求的传递
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        //如果是输出前端代码呢?
//        out.println("alert(123);");
//        out.println("sayHello();");
        String fun = request.getParameter("fun");
//        out.println(fun + "({\"name\" : \"Jack\"});");
        out.print(fun + "({\"name\" : \"Jack\"});");
//        out.println(fun + "(5,6);");
    }
}