$.ajax json数据传递方法


Posted in Javascript onNovember 19, 2008

前台

<!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>无标题页</title> 
<style type="text/css"> 
.show{ display:block;} 
.hide{ display:none;} 
</style> 
<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script> 
<script type="text/javascript"> //这个方法把ajax方法封装一下,方便调用。 
function myajax(){ 
//var obj=jsonData(); 
$.ajax({ 
type:'post', 
url:'ajax.aspx', 
data:jsonData(),//可以直接加一个函数名。 
dataType:'json', 
beforeSend:beforecall, 
success:callback 
}); 
} 
//封装json数据,为了代码清晰 
function jsonData(){ 
var jsonStr="({"; 
jsonStr+="\"name\":"; 
jsonStr+="\"tree\""; 
jsonStr+=","; 
jsonStr+="\"id\":"; 
jsonStr+="\"123\""; 
jsonStr+="})"; 
return eval(jsonStr);//关键在于转换。 
} 
//调用前方法,不成功 
function beforecall(){ 
$('#wait').addClass("show").append('调出中...'); 
//alert('');//测试是否调用 
} 
//回调函数 
function callback(data){ 
$('#response').append(data.name+data.id); 
$('#wait').css("display","none"); 
} 
//onload()事件 
$(function(){ 
$('#confirm').click(myajax); 
}) 
</script> 
</head> 
<body> 
<div id="confirm">点击</div> 
<div id="response">接收后台数据</div> 
<div id="wait" class="hide">hello</div> 
</body> 
</html>

后台
protected void Page_Load(object sender, EventArgs e) 
{ 
Hashtable ht = new Hashtable(); 
string name = Request.Params["name"].ToString(); 
string birth = Request.Params["birthday"].ToString(); 
if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(birth)) 
{ 
//Response.ContentType = "Application/json"; 
//Response.Write(CreareJson("this is ok!", 1, name, birth)); 
ht.Add("info", "成功了"); 
ht.Add("sta", "状态"); 
ht.Add("name", name); 
ht.Add("birth", birth); 
Response.Write(CreateJsonParams(ht)); 
} 
Response.End(); 
} 
private string CreateJsonParams(Hashtable items) 
{ 
string returnStr = ""; 
foreach(DictionaryEntry item in items) 
{ 
returnStr += "\"" + item.Key.ToString() + "\":\"" + item.Value.ToString() + "\","; 
} 
return "{" + returnStr.Substring(0,returnStr.Length-1) + "}"; 
}
Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
jquery $.ajax入门应用二
Nov 19 #Javascript
jquery $.ajax入门应用一
Nov 19 #Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 #Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 #Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 #Javascript
js电信网通双线自动选择技巧
Nov 18 #Javascript
JavaScript脚本性能优化注意事项
Nov 18 #Javascript
You might like
php 无限级缓存的类的扩展
2009/03/16 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
js Calender控件使用详解
2015/01/05 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python反转列表的三种方式解析
2019/11/08 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
自荐信写法介绍
2014/01/25 职场文书
优秀教师事迹简介
2014/02/02 职场文书
花店创业计划书范文
2014/02/07 职场文书
前台文员职责范本
2014/03/07 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android