一、概述：
在做项目的时候经常会用到跨域调用一些接口，所以不得不用jsonp来做，但是使用时应该注意几问题，jsonp返回的数据不能是简单的json格式，不然jsonp会不识别导致获取不到值。下面就开始介绍如何获取jsonp的方法级json接收的格式
效果如图：
二、核心代码及注意事项
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)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)