JSONP——很简单！没你想的那么复杂！

最新推荐文章于 2024-08-22 11:40:28 发布

djk8888

最新推荐文章于 2024-08-22 11:40:28 发布

阅读量3.9k

点赞数 1

分类专栏： html JS代码 jquery 文章标签： jsonp

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

版权

html 同时被 3 个专栏收录

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

jquery

44 篇文章 0 订阅

订阅专栏

JSONP——很简单！没你想的那么复杂！

jsonP说白了，就是在json字符串外面包上一个：参数名称+左右括弧！

类似这样：

jsonpCallback([{“ID”:1,“Name”:“张三”},{“ID”:2,“Name”:“李四”}])

只是包了个：jsonpCallback() 而已！

AJAX调用举例：

            $.ajax({
                type: "GET",
                async: false,                  
                url: "http://192.168.0.123/ajax/JsonP.ashx?ID=1",
                data: {},
                dataType: "jsonp",//指定服务器返回的数据类型
                jsonp: "callback",//指定参数名称，可选
                jsonpCallback: "jsonpCallback",//指定回调函数名称
                success: function (data) {                    
                    alert(data.Name);
                }
            });

$.ajax在调用的url的参数里加上：&jsonp=jsonpCallback，
其中"jsonpCallback"可以替换为任意字符串,如：callbackFunction，
则ajax的"jsonpCallback"属性值也要改为：“callbackFunction”，
即：jsonpCallback: “callbackFunction”

完整的一个例子：

<!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 src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "GET",
                async: false,
                url: "http://www.runoob.com/try/ajax/jsonp.php",
                data: {},
                dataType: "jsonp",
                jsonp: "callback",
                jsonpCallback: "callbackFunction",
                success: function (res) {
                    //alert(res);
                    $("#table1").empty();
                    var html = "";
                    html += "<tr><th>客户姓名</th></tr>";
                    for (var i = 0; i < res.length; i++) {
                        html += "<tr>"
                        html += "<td>" + res[i] + "</td>";
                        html += "</tr>";
                    }
                    $("#table1").append(html);
                }
            });
        });
    </script>
</head>
<body>
    <table id="table1" border="1"></table>
</body>
</html>

生存jsonp形式的json字符串 *.ashx文件：

<%@ WebHandler Language="C#" Class="TeacherAdvice" %>
using System;
using System.Web;
using Newtonsoft.Json;
using System.Data.SqlClient;
using System.Data;
/// <summary>
/// 综合评价 教师建议-JSON&JSONP
/// </summary>
public class TeacherAdvice : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");
        var StudentID = context.Request.QueryString["StudentID"];//学生id(必须的)
        var ClassID = context.Request.QueryString["ClassID"];//班级id(必须的)

        if (!string.IsNullOrEmpty(StudentID) && !string.IsNullOrWhiteSpace(StudentID) && !string.IsNullOrEmpty(ClassID) && !string.IsNullOrWhiteSpace(ClassID))
        {
            string sql = @" SELECT RTRIM([ClassID])[ClassID],[StudentID],[ParentCategory],[ChildrenCategory],[Contents] FROM [t_TeacherAdvice]";
            sql += "        WHERE [StudentID]='" + StudentID.Trim() + "'";
            sql += "        AND RTRIM([ClassID])='" + ClassID.Trim() + "'";
            var dt = SqlHelper.ExecuteReader(sql);
            if (dt != null && dt.Rows.Count > 0)
            {
                string json = DtToJson(dt);//真正的json字符串
                ResponseWrite(context, json);
            }
            else
            {
                ResponseWrite(context, "[]");
            }
        }
        else
        {
            ResponseWrite(context, "[]");
        }
    }
       public void ResponseWrite(HttpContext context, string json)
    {
        if (!string.IsNullOrEmpty(context.Request["callback"]))
        {
            context.Response.Write(string.Format("{0}({1})", context.Request["callback"].Trim(), json));
        }
        else
        {
            context.Response.Write(json);
        }
    }
    public string DtToJson(DataTable table)
    {
        string jsonString = string.Empty;
        jsonString = JsonConvert.SerializeObject(table);
        return jsonString;
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

以上代码在线体验地址：http://djk8888.3vdo.net/ajax/jsonp_test.html
源码下载地址：https://download.csdn.net/download/djk8888/10827780
三种调用jsonp的方式： https://blog.csdn.net/djk8888/article/details/84791133