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 相关文章推荐
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
javascript实现计算器功能详解流程
Nov 01 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
检测png图片是否完整的php代码
2010/09/06 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
python实现停车管理系统
2018/11/30 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
材料物理专业大学毕业生求职信
2013/10/15 职场文书
应届生求职信写作技巧
2013/10/24 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js