一个简单的jQuery+AJAX+JSONP解决跨域调用的问题

最新推荐文章于 2024-08-01 15:56:04 发布

djk8888

最新推荐文章于 2024-08-01 15:56:04 发布

阅读量311

点赞数

分类专栏： JS代码 jquery

本文链接：https://blog.csdn.net/djk8888/article/details/105863068

版权

JS代码同时被 2 个专栏收录

76 篇文章 1 订阅

订阅专栏

jquery

44 篇文章 0 订阅

订阅专栏

一个简单的jQuery+AJAX+JSONP解决跨域调用的问题

直接上代码：

ashx页面，作为api接口，返回一个json：

<%@ WebHandler Language="C#" Class="jsonp" %>

using System;
using System.Web;

public class jsonp : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        
        string json = "[{\"id\":1,\"name\":\"张三\"},{\"id\":2,\"name\":\"李四\"}]";
        if (!string.IsNullOrEmpty(context.Request["callback"]))
        {
            context.Response.Write(string.Format("{0}({1})", context.Request["callback"].Trim(), json));
        }
        else
        {
            context.Response.Write(json);
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

json效果如下：

html页面，jQuery+ajax 跨域调用以上接口：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                type: "GET",
                dataType: "jsonp",
                jsonp: "callback",
                jsonpCallback:"user",
                url: "http://webtest.demo.com/api/jsonp.ashx",
                data: {},
                success: function (result) {
                    var html = "";
                    for (var i in result) {
                        html += result[i].id + "&nbsp;" + result[i].name+"<br />";
                    }
                    $("#span1").append(html);
                }
            });
        });
    </script>
</head>
<body>
    <span id="span1"></span>
</body>
</html>

jsonp调用效果如下：