<!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;

    }

}

对Jquery中的ajax再封装,简化操作的更多相关文章

  1. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

  2. 深入理解ajax系列第九篇——jQuery中的ajax

    前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而 ...

  3. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  4. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  5. 浅谈jQuery中的Ajax

    浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...

  6. 从零开始学习jQuery (六) jquery中的AJAX使用

    本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即 ...

  7. Jquery中的Ajax

    AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...

  8. jquery中的ajax参数

    jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...

  9. 两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http

    一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...

随机推荐

  1. FPGA学习：VHDL设计灵活性&不同设计思路比较

    概要 由于VHDL编程实现数字电路具有很高的灵活性,为多种不同的思路编写实现同一种功能提供了可能.这些不同的设计思路,在耗费资源,可靠性,速度上也有很大的差异,往往需要我们根据实际需求和资源条件选择适 ...

  2. xml字符串转对象xml文件转对象

    判断是否是ie浏览器和非ie浏览器的方法有多种,在此只介绍用例中的方法: 1.解析xml字符串,得到xml对象的方式: function createXml(str){ if(document.all ...

  3. 【集美大学1411_助教博客】团队作业5——测试与发布（Alpha版本）

    同学们好像都进入了状态,任务都完成的不错,测试与发布是一个软件的非常重要的环节,每年双11前夕是阿里巴巴加班最严重的时期,这是因为他们在不断的测试,因为他们不想在双11到来之时有任何差池.所以无论你的 ...

  4. 团队作业4——第一次项目冲刺（Alpha版本）4.27

    一.当天站立式会议照片 本次会议主要内容:组长给大家分配新一步任务,分别汇报目前所完成的内容,完善昨日的解压接口代码,并做测试修正. 二.每个人的工 三.燃尽图 横坐标:工作日,以天为单位,一共七天, ...

  5. spring的配置文件和加载

    ①:创建applicationContext.xml配置文件放在src下 //applicationContext.xml代码 <?xml version="1.0" enc ...

  6. 201521123114 《Java程序设计》第6周学习总结

    1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 Q1.clone方法 1.1 Object ...

  7. 201521123051 《Java程序设计》 第二周学习总结

    1. 本周学习总结 1.学会使用码云:学会如何将项目同步到码云中以及从码云上的项目保存到本地. 2.各数据类型的使用. 3.运算符和表达式的使用. 4.string创建之后不可在修改. 5.Java程 ...

  8. 201521123042 《Java程序设计》第12周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String ...

  9. 201521123050 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还 ...

  10. 201521123089 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-21.1 截图你的提交结果(出现 ...