zoukankan      html  css  js  c++  java
  • jQuery与Ajax

          jQuery使Ajax变得简单,它提供了很多Ajax方法,通过这些方法,能够从远程服务器上异步请求获取诸如文本、HTML、XML或JSON等数据,并把这些外部数据直接载入网页的被选元素中。

    1.$(selector).load(URL, data, callback)方法

          该方法从服务器加载数据,并把返回的数据放入被选元素中。其中:

    • URL,必需的参数,指定希望加载数据的URL;
    • data,可选的参数,要发送给服务器的数据,以Key/value的键值对形式表示,会做为QueryString附加到请求URL中;
    • callback,可选的参数,指定load()方法完成后所执行的函数名称。

          load()方法默认使用GET方式来传递,如果[data]参数传递数据进去,就会自动转换为POST方式。例如:

    $(document).ready(function(){
        $('#btn1').click(function(){
            $('#test').load('Home/ShowFileFN');
        })
    });

          load()方法从服务器端获取文件数据,控制器方法ShowFileFN()将返回一个文件数据,load()放法获取该数据后显示在id文件为test的HTML元素内。

     >>练习1:请实现本例子的效果。(如果遇到困难,看看视频吧)

     2.$.get(URL, data, callback)方法

           该方法用于通过GET请求从服务器上请求数据。get()方法只在请求成功时可调用回调函数,如果需要在出错时执行函数,需使用$.ajax。

     $('#btn2').click(function () {
                    $.get('Home/ShowFileFN1', function (data, status) {
                        alert("数据:" + data + "
    状态:" + status);
                    })
                });

     >>练习2:请实现本例子的效果。(如果遇到困难,看看视频吧)

    3.$.post(URL, data, callback, type)方法

           该方法通过POST请求将数据提交到从服务器处理。type为可选的参数,指定客户端请求的数据类型(JSON、XML等)。

           post()方法只在请求成功时可调用回调函数,如果需要在出错时执行函数,需使用$.ajax。

     $('#btn3').click(function () {
                    $.post('Home/ShowFileFN2', function (data, status) {
                        alert("数据:" + data + "
    状态:" + status);
                    })
                });

    4.$.ajax(options)方法

          该方法通过HTTP请求加载远程数据。ajax()方法返回其创建的XMLHttpRequest对象,大多数情况下无需直接操作该对象,但特殊情况下可用于手动终止请求。

          ajax()方法是jQuery的底层Ajax实现,而get()和post()等方法则是简单易用的高层实现。

          ajax()方法只包含一个参数,该参数是可选的。options用于配置Ajax请求,该参数可以通过$.ajaxSetup()设置任何选项的默认值。

     $('#btn4').click(function () {
                    htmlobj=$.ajax({url:"Home/ShowFileFN3", async:false});
    $("#test3").html(htmlobj.responseText);
    });
  • 相关阅读:
    HTML中一定会常用的标签和标签属性(这是网页构成的重要元素
    HTML(超文本语言)
    SQL SERVER中视图、事务
    important覆盖行内样式
    线性渐变
    「JavaScript面向对象编程指南」闭包
    移动端文章图片大小限制
    Vue中ajax返回的结果赋值
    「JavaScript面向对象编程指南」基础
    JS媒体查询
  • 原文地址:https://www.cnblogs.com/meetyy/p/4118629.html
Copyright © 2011-2022 走看看