• 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

  • 相关阅读:
    2017-2018-1 20155337《信息安全系统设计基础》第6周学习总结
    # 2017-2018-1 20155337《信息安全系统设计基础》第5周学习总结+mybash
    # 2017-2018-3 20155337《信息安全系统设计基础》第4周学习总结
    # 2017-2018-3 20155337《信息安全系统设计基础》第3周学习总结
    # 20155337 2017-2018-1 《信息安全系统设计基础》第二周课堂实践+myod
    # 20155337 2017-2018-1 《信息安全系统设计基础》第一周学习总结
    2017-2018-1 20155317《信息安全系统设计基础》第八周学习总结
    20155317 第八周课下作业(2)
    20155317 第八周课下作业(1)
    实验二20155324 20155317 实验报告 固件程序设计
  • 原文地址:https://www.cnblogs.com/bynet/p/1754984.html
Copyright © 2020-2023  润新知