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

复制代码 代码如下:

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

时间: 2024-07-30 20:27:50

对Jquery中的ajax再封装,简化操作示例_jquery的相关文章

Jquery中的ajax再封装,简化操作介绍

 这篇文章主要介是对Jquery中的ajax再封装,简化操作示例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <!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/

jQuery中使用Ajax获取JSON格式数据示例代码_jquery

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于"名称"和"值"的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现. 下面就使用jQuery读取music.txt文件中的JSON数据格式信息. 首先,music.txt中的内容如下: 复制代码 代码如下: [ {"optionKey":"1"

jquery中通过父级查找进行定位示例_jquery

复制代码 代码如下: <ul id="newslist"> <li> <span class="fr w160 tl">2013-06-24</span> <span class="news_list_icon fl mr8 icon" ></span> <span class="fl"><a href="{href}"

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

一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 二.前言 Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异, 并且让调用Aj

分享 Jquery EasyUI 封装简化操作代码

jquery easyui 封装 使用easyui datagrid部分,主要是节省了写一堆html代码. 通过封装,可以节省每个页面都写一堆easyui的代码,相对要简单一些,个人觉得,毕竟是自己做的,难免自我感觉好些,哈哈. 封装好了之后,只需要在html中引用各种需要库,并在body中写<table id="myid"><table> 然后js中调用baseGrid('myid',"focus_ft","<{:U('Fo

跟我学jquery(五)jquery中的ajax详解 .

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异, 并且让调用Ajax更加简单. Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去.为此,只需简单地选择所需的元素,然后使用 load() 函数即可. 然后如果要用普通的ajax的话会使用大量的代码来实现.下面我们就来看一下jquery中的ajax. 一

JQuery中使用Ajax赋值给全局变量异常的解决方法

 本篇文章主要是对JQuery中使用Ajax赋值给全局变量异常的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 我们在用JQuery的Ajax从后台提取数据后想把它赋值给全局变量,但是却怎么都赋不进,为什么呢?   原因其实很简单,我们用的Ajax是异步操作,也就是说在你赋值的时候数据还没提取出来,你当然赋不进去,所以只要改成同步操作就行~   方法1:先设置同步在进行Ajax操作      代码如下: //在全局或某个需要的函数内设置Ajax异步为false,也就是同步

编码-jQuery中的ajax方法获取到json数据中文会乱码

问题描述 jQuery中的ajax方法获取到json数据中文会乱码 接口如下:http://cre.mix.sina.com.cn/api/finance/topstock_display这个接口 默认返回是 gbk的编码 支持 oe=utf-8,但是xtmlhttprequest 返回的数据默认的字符编码是utf-8,后台说用oe=utf转换,求解... 解决方案 首先你这不是json,所以你需要从服务器语言上把数据转换成json再去传到前端:其次,你要把后台脚本改成utf-8编码,不知道你用

利用jQuery中的ajax分页实现代码_jquery

本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下 把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp 本人封装后,使用者需要在页面中引入page_ajax.jsp,并且在查询列表的时候,点击按钮,调用自定义的方法,如myFunction(),在这个方法里头,调用自己拓展的jquer方法,$.pageAjax(url,functionName,showDIv);这里的url是你要请求的ajax的