网页前端设计

http://www.86y.org

搜索文章

jsonp数据格式及实例展示附源码

用声音读出全文关注我吧
 2016/10/17 11:27:52 阅读次数:30905

一、概述:

在做项目的时候经常会用到跨域调用一些接口,所以不得不用jsonp来做,但是使用时应该注意几问题,jsonp返回的数据不能是简单的json格式,不然jsonp会不识别导致获取不到值。下面就开始介绍如何获取jsonp的方法级json接收的格式

效果如图:

jsonp数据格式及实例展示附源码-幸凡学习网

二、核心代码及注意事项

1、jq库的引入

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

2、jsonp调用方法

$.ajax({
        type: "get",
        dataType: "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonpCallback: "jsonpcallback",//自定义的jsonp回调函数名称,
        //数据返回格式如:jsonpcallback(json数据);
        //data.json内容及格式如下
        //jsonpcallback({"datatype": 0,"datatxt": "Success"});
        url: "http://192.168.1.192:1234/json/data.ashx",
        data: { "page": "1" },//需要传入的参数
        success: function (data) {
            console.log(data.status);//输出Success
        }
    });

3、jsonp获取的数据格式

jsonpcallback({"datatype": 0,"datatxt": "Success"})

三、两个完整页面的代码

jsonp.html文件写法:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jsonp数据格式及实例展示附源码-幸凡学习网</title>    
</head>
<body>
    
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>
    $(function () {

        $.ajax({
            type: "get",
            dataType: "jsonp",
            jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
            jsonpCallback: "jsonpcallback",//自定义的jsonp回调函数名称,
            //数据返回格式如:jsonpcallback(json数据);
            //data.json内容及格式如下
            //jsonpcallback({"datatype": 0,"datatxt": "Success"});
            url: "http://192.168.1.192:1234/json/data.ashx",
            data: { "page": "1" },//需要传入的参数
            success: function (data) {
                console.log(data.status);//输出Success
            }
        });
    });
</script>

data.ashx文件写法:

<%@ WebHandler Language="C#" Class="data" %>
using System;
using System.Web;

public class data : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Write(context.Request["callback"].ToString()+"({\"datatype\": 0,\"status\": \"Success\"})");
	}
    
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

三、结语:

本文章纯属个人理解,如有妥之处,请指出。本着为了方便查阅故写下来,也希望能帮助到同道中人。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭