日期:2014-05-16  浏览次数:20469 次

Jquery调用从ashx文件返回的jsonp格式的数据处理实例

开发环境:vs2010+jquery-1.4.min.js

解决问题:网上代码比较少,好多调试不通,返回数据不用json而用jsonp主要考虑解决跨域问题

开发步骤:打开VS2010,新建一web站点,保存位置选择D:\Website1;添加新项,选择一般处理程序,命名cmdHandler.ashx;添加新项,选择HTML页,命名为testAshx.htm;网上下载jquery-1.4.min.js拷贝到web站点中

项目相关代码和运行截图如下:

1、testAshx.htm代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery调用ashx文件返回的jsonp格式数据实例</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
</head>
<body>
    <div id="Div1"> </div>
    <div id="Div2"> </div>
    <div id="Div3"> </div>
    <div id="Div4"> </div>
    <script type="text/javascript" >
        //回调函数1
        function success_jsonpCallback11(data) {
            var $ul = $("<ul></ul>");
            $.each(data, function (i, v) {
                $("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
            });
            $("#Div2").html($ul);
        }
        //回调函数2
        function success_jsonpCallback22(data) {
            var $ul = $("<ul></ul>");
            $.each(data, function (i, v) {
                $("<li/>").text(v["OrderID"] + " " + v["CustomerID"]).appendTo($ul)
            });
            $("#Div4").html($ul);
        }
        //页面加载完成后执行下面代码
        $(document).ready(function () {
            //读取Ashx文件中直接返回的字符串
            $.ajax({
                url: 'cmdHandler.ashx',
                data: { StatusCode: 1 },
                dataType: "jsonp",
                jsonp: "jsonpcallback",
                success: function (data) {
                    var $ul = $("<ul></ul>");
                    $.each(data, function (i, v) {
      &nb