开发环境：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) {
                        $("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
                    });
                    $("#Div1").html($ul);
                }
            });
            //读取Ashx文件中直接返回的字符串带回调函数名称
            $.ajax({
                type: "get",
                async: false,
                url: "cmdHandler.ashx",
                data: { StatusCode: 1 },
                dataType: "jsonp",
                jsonp: "jsonpcallback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) 
                jsonpCallback: "success_jsonpCallback1", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 
                success: function (json) {
                    //在此之前若没有定义回调函数success_jsonpCallback1则执行下面的代码
                    var $ul = $("<ul></ul>");
                    $.each(json, function (i, v) {
                        $("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
                    });
                    $("#Div2").html($ul);
                },
                error: function () {
                    alert('fail');
                }
            });
            //读取Ashx文件中返回的数据库字符串
            $.ajax({
                type: "get",
                async: false,
                url: "cmdHandler.ashx",
                data: { StatusCode: 2 },
                dataType: "jsonp",
                jsonp: "jsonpcallback",
                success: function (json) {
                    var $ul = $("<ul></ul>");
                    $.each(json, function (i, v) {
                        $("<li/>").text(v["OrderID"] + " " + v["CustomerID"]).appendTo($ul)
                    });
                    $("#Div3").html($ul);
                },
                error: function () {
                    alert('fail');
                }
            });
            //读取Ashx文件中返回的数据库字符串带回调函数名称
            $.ajax({
                type: "get",
                async: false,
                url: "cmdHandler.ashx",
                data: { StatusCode: 2 },
                dataType: "jsonp",
                jsonp: "jsonpcallback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) 
                jsonpCallback: "success_jsonpCallback2", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 
                success: function (json) {
                    //在此之前若没有定义回调函数success_jsonpCallback2则执行下面的代码
                    var $ul = $("<ul></ul>");
                    $.each(json, function (i, v) {
                        $("<li/>").text(v["OrderID"] + " " + v["CustomerID"]).appendTo($ul)
                    });
                    $("#Div4").html($ul);
                },
                error: function () {
                    alert('fail');
                }
            });
            /* 回调函数写在末尾时候不起作用
            function success_jsonpCallback(data) {
                alert("测试成功");
            } 
            */
    });
</script>
</body>
</html>

2、cmdHandler代码如下:

<%@ WebHandler Language="C#" class="cmdHandler" %>

using System;
using System.Web;
//添加引用
using System.Data;
using System.Data.SqlClient;
using System.Text;

public class cmdHandler : IHttpHandler {

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string StatusCode = context.Request.QueryString["StatusCode"];
        switch (StatusCode)
        {
            case "1"://返回测试用的组合字符串
                context.Response.Write(getFormatString(context));
                break;
            case "2"://返回查询数据库得到的组合字符串
                context.Response.Write(GetDbString(context));
                break;
        }
    }
    #region 测试用的组合字符串
    public string getFormatString(HttpContext context)
    {
        string strReturn = "";
        string jsonp = context.Request["jsonpcallback"];
        string str = "[{\"id\":\"1\",\"name\":\"张三\"},{\"id\":\"2\",\"name\":\"李四\"}]";
        strReturn = jsonp + "(" + str + ")";
        return strReturn;
    }
    #endregion

#region 查询数据库得到组合字符串
    public string GetDbString(HttpContext context)
    {
        string strReturn = "";
        string strConn = "server=.;database=northwnd;uid=sa;pwd=123456;";//数据库连接字符串
        string strFun = context.Request["jsonpcallback"];//传递参数
        StringBuilder strJsonData = new StringBuilder();//拼接json所有格式
        StringBuilder strJsonMsgData = new StringBuilder();//拼接json内容
        string sqlText = "select top 3 * from Orders";//查询数据表语句
        DataSet ds = new DataSet();
        SqlConnection mySqlConnection = new SqlConnection();
        mySqlConnection.ConnectionString = strConn;
        try
        {
            mySqlConnection.Open();
            SqlCommand mySqlCommand = new SqlCommand();
            mySqlCommand.CommandText = sqlText;
            mySqlCommand.Connection = mySqlConnection;
            SqlDataAdapter da = new SqlDataAdapter(mySqlCommand);
            da.Fill(ds);
            DataTable dt = ds.Tables[0];
            if (dt.Rows.Count > 0)
            {
                strJsonData.AppendFormat("{0}([", strFun);//json begin
                foreach (DataRow row in dt.Rows)//得到行集合
                {
                    strJsonMsgData.Append("{\"OrderID\"" + ":" + "\"" + row["OrderID"].ToString() + "\"" + ",\"CustomerID\"" + ":" + "\"" + row["CustomerID"].ToString() + "\"}" + ",");
                }
                strJsonData.Append(strJsonMsgData.ToString().TrimEnd(','));
                strJsonData.Append("])");//json end

strReturn = strJsonData.ToString();
            }
            else
            {
                strJsonData.AppendFormat("{0}([", strFun);//json begin
                strJsonData.Append("])");//json end
                strReturn = strJsonData.ToString();
            }
        }
        catch
        {
        }
        finally
        {
            mySqlConnection.Close();
        }
        return strReturn;
    }
    #endregion

public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

3、jquery-1.4.min.js文件不贴代码了，到http://www.codesocang.com自己下载，也可以使用更高版本的jquery.js文件

4、IE和火狐运行截图如下:

文章来源：http://www.codesocang.com/jiaocheng/js/7701.html

Jquery调用从ashx文件返回的jsonp格式的数据处理实例的更多相关文章

  1. jquery訪问ashx文件演示样例

    .ashx 文件用于写web handler的..ashx文件与.aspx文件类似,能够通过它来调用HttpHandler类,它免去了普通.aspx页面的控件解析以及页面处理的过程.事实上就是带HTM ...

  2. jquery调用spring mvc接口返回字符串匹配

    背景:有个增删改页面,用jquery祭出ajax异步调用接口,spring mvc响应对象是个json字符串,jquery根据响应结果判断,如果删除成功给出提示.那么问题来了,接口里响应的字符串怎么匹 ...

  3. jquery ajaxform上传文件返回不提示信息的问题

    在使用jquery的ajaxform插件进行ajax提交表单并且上传文件的时候,返回类型datatype :json但是后台通过写出一个json对象后,在执行完以后没有进入success函数,而是直接 ...

  4. 在thinkphp5.0中调用ajax时， 返回的JSON 格式数据在html前台不能用时

    在thinkphp5.0中调用ajax时,如果控制器返回的数据为json格式,视图层接收到返回值即为json格式的数据,此时应该把 JSON 文本转换为 JavaScript 对象,方便调用.具体代码 ...

  5. 关于jquery js读取excel文件内容 xls xlsx格式 纯前端

    附带参考:http://blog.csdn.net/gongzhongnian/article/details/76438555 更详细导入导出:https://www.jianshu.com/p/7 ...

  6. JS 对java返回的json格式的数据处理

    var dataObj=eval("("+res+")"); alert(dataObj.billBuy) //res是如下的数据 {"billBuy ...

  7. ashx文件结合ajax使用(返回json数据)

    ashx文件返回json数据: public void ProcessRequest(HttpContext context) { context.Response.ContentType = &qu ...

  8. Jquery跨域请求php数据（jsonp）

    Jquery跨域请求php数据 我们一般用到ajax的时候是在同服务器下,一般情况下不会跨域,但有时候需要调用其他域名或ip下的数据的时候,遇到跨域请求数据的时候. 今天在工作中碰到javascrip ...

  9. 自己遇到的ajax调用ashx文件无法获取返回值的一种情况

    无法获取返回值的ashx文件大致如下: public void ProcessRequest (HttpContext context) { context.Response.ContentType ...

随机推荐

  1. xapian安装

    xapian安装:$ su enter your root password # rpm -ivh http://rpm.eprints.org/rpm-eprints-org-key-1-1.noa ...

  2. 【网络流24题】No.7 试题库问题 （最大流，二分图多重匹配）

    [题意] 假设一个试题库中有 n 道试题. 每道试题都标明了所属类别. 同一道题可能有多个类别属性.现要从题库中抽取 m 道题组成试卷.并要求试卷包含指定类型的试题. 试设计一个满足要求的组卷算法. ...

  3. OA学习笔记-010-Struts部分源码分析、Intercepter、ModelDriver、OGNL、EL

    一.分析 二. 1.OGNL 在访问action前,要经过各种intercepter,其中ParameterFilterInterceptor会把各咱参数放到ValueStack里,从而使OGNL可以 ...

  4. Android开源项目发现---ViewPager 、Gallery 篇（持续更新）

    1. Android-ViewPagerIndicator  鼎鼎大名,配合ViewPager使用的Indicator,支持各种位置和样式 项目地址:https://github.com/JakeWh ...

  5. 《鸟哥的Linux私房菜》读书笔记三

    1.在Linux系统中,每个设备都被当成一个文件来对待,每个设备都会有设备文件名.比如 IDE接口的硬盘文件名为/dev/hd[a-d] 括号内的字母为a-d当中任意一个,即/dev/hda,/dev ...

  6. C++中new和不new的区别

    我们都知道C++中有三种创建对象的方法,如下: 复制代码代码如下: #include <iostream>using namespace std; class A{private:    ...

  7. Spark快速数据处理

    原书名:Fast Data Processing with Spark 原出版社:Packt Publishing 作者: (美)Holden Karau 丛书名:大数据技术丛书 出版社:机械工业出版 ...

  8. pcDuino汉化方法

    1,打开终端:2,在终端输入命令 sudo apt-get update 更新一下软件源3, 输入命令下载中文支持包 sudo apt-get install language-pack-gnome- ...

  9. 远程ubuntu虚拟机Tensorflow搭建 - 1 SSH连接

    感谢英才计划,我们每个人收获了一台清华的虚拟机. 4 core CPU 16GB Memory 80GB Disk 配置不错了... 用ssh密钥登录.赠送hadoop-key.pem一把. 先用su ...

  10. Android优秀开源项目

    本文转自:http://blog.tisa7.com/android_open_source_projects Android优秀开源项目 Android经典的开源项目其实非常多,但是国内的博客总是拿 ...