Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据


Posted in Javascript onMarch 15, 2010

一、AjaxJson.aspx

处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下:

protected void Page_Load(object sender, EventArgs e) 
{ 
string u = Request["UserName"]; 
string p = Request["Password"]; 
string output = string.Format("'UserName':'{0}','Password':'{1}'", u, p); 
Response.Write("[{"); 
Response.Write(output); 
Response.Write("}]"); 
Response.End(); 
}

二、JqueryRequest.aspx

通过点击按钮来请求AjaxJson.aspx,获取JSon数据。代码如下:


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script type="text/javascript" language="javascript" src="js/jquery-1.3.2.js"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="text" name="Text1" id="Text1"/><br /> 
<input type="text" name="Text2" id="Text2"/> 
<br /> 
<input type="button" id="btn1" onclick="BtnClick()" /> 
</div> 
<div id="dd"> 
sd 
</div> 
<div> 
<script type="text/javascript" language="javascript"> 
function BtnClick() { 
var uid = $("#Text1").val(); 
var pwd = $("#Text2").val(); 
$.ajax({ 
url: "AjaxJson.aspx", 
type: "POST", 
data: { UserName: uid, Password: pwd }, 
success: function(data) { 
var json = eval(data); //eval("(" + data + ")"); 
$.each(json, function(idx, item) { 
var user = item.UserName; 
var pass = item.Password; 
$("#dd").html("<h1>用户名:" + user + " 密码:" + pass + "</h1>"); 
}); 
} 
}); 
} 
</script> 
</div> 
</form> 
</body> 
</html>

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
vue axios用法教程详解
Jul 23 Javascript
3种vue组件的书写形式
Nov 29 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vue 如何使用递归组件
Oct 23 Javascript
jQuery MD5加密实现代码
Mar 15 #Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 #Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 #Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 #Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 #Javascript
javascript css styleFloat和cssFloat
Mar 15 #Javascript
javascript 嵌套的函数(作用域链)
Mar 15 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP CURL 多线程操作代码实例
2015/05/13 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
Node 代理访问的实现
2019/09/19 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
上课迟到检讨书
2014/02/19 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
初三开学计划书
2014/04/27 职场文书
公诉意见书范文
2015/06/05 职场文书
城南旧事电影观后感
2015/06/16 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android