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

旧约Alatus

366人浏览 · 2023-11-18 15:19:41

旧约Alatus · 2023-11-18 15:19:41 发布

<!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);");
    }
}

MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

“钞能力”奏效？Meta一口气挖走OpenAI三员大将

MCP技术社区

平板选大屏：2025年最大平板屏幕TOP5推荐！

若追求屏幕尺寸与AI功能的前沿融合,荣耀MagicPad 3的165Hz护眼大屏、12450mAh青海湖电池及免费AI PPT等创新,使其成为当前“大屏AI化”的引领者。2025年的平板市场迎来一波“大屏革命”,13英寸以上的超大屏搭配旗舰性能与AI赋能,彻底模糊了平板与笔记本的界限。作为首款“AI全场景赋能”的平板,MagicPad 3从护眼、续航到交互,重新定义了大屏平板的体验上限。整合AI离

MCP技术社区

2025年计算机行业选择分析报告

工业和信息化部、中央网信办等四部门联合印发《国家人工智能产业综合标准化体系建设指南（2024版）》，提出到2026年，我国人工智能产业标准与产业科技创新的联动水平持续提升，新制定国家标准和行业标准50项以上，引领人工智能产业高质量发展的标准体系加快形成。传统的初级编码岗位和一些过时技术栈面临被淘汰的风险。从板块表现来看，截至2025年2月7日收盘，计算机指数较年初上涨11.01%，同期沪深300指