对Jquery中的ajax再封装,简化操作示例


Posted in Javascript onFebruary 12, 2014
<!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>jQueryAjaxJson取值示例</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            jsonAjax("AjaxQuery.aspx", "type=json", "json", callBack);
            jsonAjax("AjaxQuery.aspx", "id=1&name=2&type=text", "text", callBackTxt);
        });
        function callBack(data) {
            $("#ddd").html('');
            var json = eval(data); //数组  
            $.each(json, function (index, item) {
                //循环获取数据
                var name = json[index].Name;
                var age = json[index].Age;
                var sex = json[index].Sex;
                $("#ddd").html($("#ddd").html() + "<br>" + name + "  " + age + "  " + sex + "<br/>");
            });
        };
        function callBackTxt(data) {
            $("#ccc").html(data);
        };
        /**
        * ajax post提交
        * @param url
        * @param param
        * @param datat 为html,json,text
        * @param callback回调函数
        * @return
        */
        function jsonAjax(url, param, datat, callback) {
            $.ajax({
                type: "post",
                url: url,
                data: param,
                dataType: datat,
                success: callback,
                error: function () {
                    jQuery.fn.mBox({
                        message: '恢复失败'
                    });
                }
            });
        }
    </script>
</head>
<body>
    <span id="ccc"></span>
    <span id="ddd"></span>
</body>
</html>

using System;
//新增
using System.Web.Script.Serialization;
using System.Collections.Generic;
public partial class AjaxQuery : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //数据模拟,仅供参考
            string messgage = string.Empty;
            string id = Request["id"];
            string name = Request["name"];
            string gettype = Request["type"];
            if (gettype=="text")
            {
                messgage = (id == "1" && name == "2") ? "ok符合条件" : "sorry不符合条件";
            }
            else if (gettype == "json")
            {
                List<Student> list = new List<Student>();
                for (int i = 0; i < 50; i++)
                {
                    Student a = new Student();
                    a.Name = "张三" + i;
                    a.Age = i;
                    a.Sex = "男";
                    list.Add(a);
                }
                messgage = new JavaScriptSerializer().Serialize(list); 
            }
            else
            { }
            Response.Write(messgage);
            Response.End();
        }
    }
    public struct Student
    {
        public string Name;
        public int Age;
        public string Sex;
    }
}
Javascript 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 #Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 #Javascript
jquery ajax,ashx,json的用法总结
Feb 12 #Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 #Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 #Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 #Javascript
JavaScript cookie的设置获取删除详解
Feb 11 #Javascript
You might like
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
javascript基本语法
2016/05/31 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python实现k-means算法
2018/02/23 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
python实现复制大量文件功能
2019/08/31 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
初二政治教学反思
2014/01/12 职场文书
高一历史教学反思
2014/01/13 职场文书
家长寄语大全
2014/04/02 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书