对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/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;
    }
}

赞 (0)

相关推荐

  • 基于jQuery的ajax方法封装

    ajax (ajax开发)简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在实际的项目里,ajax的应用频率很高

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • 封装了jQuery的Ajax请求全局配置

    摘要: jQuery已经成为项目中最常见的js库,也是前端开发最喜欢使用的库.下面是在项目中封装了jQuery的Ajax,分享给大家. 代码: 复制代码 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {     var url = opt.url;     var href = location.href;     // 判断是否跨域请求     var requestType = 'jsonp';     if (url.indexOf

  • 浅析jQuery Ajax通用js封装

    本文大概分为三步实现jquery ajax通过js封装,通过代码实例讲解,代码附有注释,比较容易理解,具体详情如下所示: 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> 第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了 /******************

  • 关于二次封装jquery ajax办法示例详解

    前言 Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML AJax所涉及到得技术: 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来和服务器进行异步通信.(核心) 4.使用javascript来绑定和调用. 在我们前端处理数据的时候免不了要 ajax 与后台通信, ajax 是通过 XMLHttpRequest 对象与服务器进行通信的, jquery 在 XMLHt

  • 对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/1999/xhtml"><head>    <title>jQueryAja

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

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

  • 详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),当然也可同步,这样就可使网页从服务器请求少量的信息,而不是整个页面.Ajax使我们的项目更小.更快,更友好,在前端开发有很高的地位,也是面试题的热点.本次测试是在localhost本地环境. 1.原生ajax (1)html前端代码get请求方式创建一个ajax实例xhr

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

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

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

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

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

  • 详解jQuery中关于Ajax的几个常用的函数

    一: AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 有很多使用 AJAX 的应用程序案例:新浪微博.Google 地图.开心网等等. 二:传

  • jquery中的ajax异步上传

    找了好久终于在网上找到了ajax异步上传文件的方法,不过网上大多数是php的 ,我改为struts2写的 大同小异,希望对学习java的人有一定的帮助.我上传的是音乐文件. ajaxfileupload.js这个js文件是主要文件,一定要导入. jsp页面 ,其中我还做了div的隐藏***************************** <%@ page language="java" import="java.util.*" pageEncoding=&

  • jquery中的ajax同步和异步详解

    之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题.最近的项目用了到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除. 而异步则这个AJAX代码运行中的时候其他代码一样可以运行. jquery的async:false,这个属性 默认是true:异步,false:同步. $.ajax({ type: "post", url: "

  • jQuery中的ajax async同步和异步详解

    项目中有这样一个需求,使用ajax加载数据返回页面并赋值,然后前端取出该值 这其中涉及到代码的顺序问题,有时后台还未返回数据,但已执行后面代码, 所以就会造成取不到值 $.ajax({ type: "post", url: "admin/PfmOptionRuleItem.do", success: function(data){ $("#ruleItem").val(data.ruleItem); //① } }); return $(&quo

  • javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

    本文实例讲述了javascript和 jQuery中的AJAX技术.分享给大家供大家参考,具体如下: 1.什么是AJAX? AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面.

随机推荐