对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 相关文章推荐
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
原生js实现放大镜效果
Jan 11 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
关于php mvc开发模式的感想
2011/06/28 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
js类型检查实现代码
2010/10/29 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
Python 的 with 语句详解
2014/06/13 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
单位领导证婚词
2014/01/14 职场文书
安全生产先进个人材料
2014/02/06 职场文书
抽样调查项目计划书
2014/04/24 职场文书
学雷锋宣传标语
2014/06/25 职场文书
入股合作协议书
2014/10/12 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers