zoukankan      html  css  js  c++  java
  • jQuery.ajax的简单应用实例 附实例下载

      先来看看jQuery.ajax(options)的简单介绍:

        通过 HTTP 请求加载远程数据。

        jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

        $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

        $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。

      返回值:

        XMLHttpRequest

      参数:

        options (可选) : AJAX 请求设置。所有选项都是可选的。

      选项(只对此实例用到的选项进行解释):

        type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

        url (String) : (默认: 当前页地址) 发送请求的地址。

        data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。

                    必须为 Key/Value格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

        beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 Ajax 事件.

        success (Function) : 请求成功后回调函数。参数:服务器返回数据,数据格式。 Ajax 事件。

      实例:

        用$.ajax()提交两个数值并返回这两个数值的和。

        本实例使用jQuery 1.4.2类库。

        先看HTML文件的部分代码:

    <body>
        
    <form id="form1" runat="server">
        
    <div style="font-size:12px; padding-left:15px; padding-top:15px;">
           
    <input type="button" id="btn_ok" value="测试" onclick="FunAjax()" />
           
    &nbsp;&nbsp;
           
    <span id="span_content">显示结果</span>
        
    </div>
        
    </form>
    </body>

        当点击"测试"按钮时触发FunAjax函数,下面来看这个函数代码:

    function FunAjax()
    {
        $.ajax({
            type: 
    "POST",
            url: 
    "jQueryAjaxTest.ashx",  
            data: 
    "begin=1&end=9",
            beforeSend: 
    function(){
                $(
    "#span_content").text("数据处理中...");
            },
            success: 
    function(msg){
                $(
    "#span_content").text("两个数的和为: " + msg);
            }
        });  
    }

        FunAjax函数利用$.ajax()调用了jQueryAjaxTest.ashx文件,并通过data选项向jQueryAjaxTest.ashx文件传递了两个数值,即begin=1&end=9,jQueryAjaxTest.ashx文件将返回这两个数值相加的结果,jQueryAjaxTest.ashx文件部分代码:

            //返回类型
            context.Response.ContentType = "text/plain";

            
    int iBegin = 0;
            
    int iEnd = 0;
            
    //接收参数
            int.TryParse(context.Request["begin"].ToString(), out iBegin);
            
    int.TryParse(context.Request["end"].ToString(), out iEnd);

            Thread.Sleep(
    1000);   //为了能体现加载过程,在此我将程序延迟了一秒钟
            
            
    //计算并返回结果
            context.Response.Write((iBegin+iEnd).ToString());

         这个实例只是$.ajax()的一个很简单的应用,但很大程度上简化了AJAX的开发,实现页面无刷新从服务器获取数据。

         下载这个实例:

           链接: http://pan.baidu.com/s/1o6xc6vS 密码: eczj

  • 相关阅读:
    “XXXXX” is damaged and can’t be opened. You should move it to the Trash 解决方案
    深入浅出 eBPF 安全项目 Tracee
    Unity3d开发的知名大型游戏案例
    Unity 3D 拥有强大的编辑界面
    Unity 3D物理引擎详解
    Unity 3D图形用户界面及常用控件
    Unity 3D的视图与相应的基础操作方法
    Unity Technologies 公司开发的三维游戏制作引擎——Unity 3D
    重学计算机
    windows cmd用户操作,添加,设备管理员组,允许修改密码
  • 原文地址:https://www.cnblogs.com/bynet/p/1754984.html
Copyright © 2011-2022 走看看