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) {
$("<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格式的数据处理实例的更多相关文章
- jquery訪问ashx文件演示样例
.ashx 文件用于写web handler的..ashx文件与.aspx文件类似,能够通过它来调用HttpHandler类,它免去了普通.aspx页面的控件解析以及页面处理的过程.事实上就是带HTM ...
- jquery调用spring mvc接口返回字符串匹配
背景:有个增删改页面,用jquery祭出ajax异步调用接口,spring mvc响应对象是个json字符串,jquery根据响应结果判断,如果删除成功给出提示.那么问题来了,接口里响应的字符串怎么匹 ...
- jquery ajaxform上传文件返回不提示信息的问题
在使用jquery的ajaxform插件进行ajax提交表单并且上传文件的时候,返回类型datatype :json但是后台通过写出一个json对象后,在执行完以后没有进入success函数,而是直接 ...
- 在thinkphp5.0中调用ajax时， 返回的JSON 格式数据在html前台不能用时
在thinkphp5.0中调用ajax时,如果控制器返回的数据为json格式,视图层接收到返回值即为json格式的数据,此时应该把 JSON 文本转换为 JavaScript 对象,方便调用.具体代码 ...
- 关于jquery js读取excel文件内容 xls xlsx格式 纯前端
附带参考:http://blog.csdn.net/gongzhongnian/article/details/76438555 更详细导入导出:https://www.jianshu.com/p/7 ...
- JS 对java返回的json格式的数据处理
var dataObj=eval("("+res+")"); alert(dataObj.billBuy) //res是如下的数据 {"billBuy ...
- ashx文件结合ajax使用(返回json数据)
ashx文件返回json数据: public void ProcessRequest(HttpContext context) { context.Response.ContentType = &qu ...
- Jquery跨域请求php数据（jsonp）
Jquery跨域请求php数据 我们一般用到ajax的时候是在同服务器下,一般情况下不会跨域,但有时候需要调用其他域名或ip下的数据的时候,遇到跨域请求数据的时候. 今天在工作中碰到javascrip ...
- 自己遇到的ajax调用ashx文件无法获取返回值的一种情况
无法获取返回值的ashx文件大致如下: public void ProcessRequest (HttpContext context) { context.Response.ContentType ...
随机推荐
- Axzue注册码
ahjesus Axure RP 7.0注册码 用户名:axureuser 序列号:8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyPD6lK7G6+t ...
- [wikioi]数的划分
http://wikioi.com/problem/1039/ 划分型DP.最终的思路是,F[i][j]表示i分成j份,如果分出来的有1,那么去掉1,就是F[i-1][j-1]:如果没有1,那就都减1 ...
- [转贴] C++ 判断主机是否处于联网状态下
直接让本机访问一个网站,如果成功的话,就说明成功联网,没有访问成功,则说明没有联网!!! #include<iostream> #include <WINSOCK2.H> #p ...
- ANDROID_MARS学习笔记_S03_009_GOOGLEMAP3
一.代码 1.xml(1)main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLay ...
- Android4.0以下View的Drag和Drop简单实现
主要代码部分: 实现View的onTouch方法,变换落点的X,Y坐标,定义两个变量存放拖动前的坐标位置. int prevX,prevY; @Override public boolean onTo ...
- java学习多线程之卖票示例
这一节我们来说一个示例就是卖票示例: 需求: 我们现在有100张票,然后分四个窗口来卖,直到卖完为止. 思路: 1.先定一个一个票类,描述票的属性,还有打印卖出的票,并且实现Runnable中的run ...
- oracle查询转换_view merge
oracle对于子查询的支持做的很好,oracle optimizer会对inline view进行query transfomation,即视图合并,不过也经常带来意想不到的问题.下面是一个inli ...
- -_-#【Better Code】
i++ 与 ++i 的性能区别 if (true) { console.log('hi') } if (!false) { console.log('hi~') } true && c ...
- 设计模式（c#）代码总结
设计模式分为三种类型 创建型模式:简单工厂.工厂方法模式.抽象工厂模式.建造者模式.原型模式.单例模式 结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式. 行为型模式 ...
- dos攻击与防御
SYN Flood攻击 标准的TCP三次握手过程如下: 客户端发送一个包含SYN标志的TCP报文,SYN即同步(Synchronize),同步报文会指明客户端使用的端口以及TCP连接的初始序号: 服 ...