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

布满荆棘的人生 2024-02-18 12:10 65阅读 0赞

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