zoukankan      html  css  js  c++  java
  • 20151207jquery 学习笔记 Ajax

    .load()方法是局部方法,因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和 $.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取, 而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。 $.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数 type,即服务 器返回的内容格式:包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数, 后面三个为可选参数。 

    //使用$.get()异步返回 html 类型 

    $('input').click(function(){

    $.get('test.php',{

    url:'ycku'

    },function(response,status,xhr){

    if(status=='success'){

    $('#box').html(response);

    } }) //type 自动转为 html

    });

    注意:第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断,并不 需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。

    //使用$.get()异步返回 xml 

    $('input').click(function(){

    $.get('test.xml',function(response,status,xhr){

    $('#box').html($(response).find('root').find('url').text());

    }); //type 自动转为 xml

    });

    注意:如果载入的是 xml 文件,type 会智能判断。如果强行设置 html 类型返回,则会 把 xml 文件当成普通数据全部返回,而不会按照 xml 格式解析数据。

    //使用$.get()异步返回 json

    $.get('test.json',function(response,status, xhr){

    alert(response[0].url);
    });

    $.post()方法的使用和$.get()基本上一致,他们之间的区别也比较隐晦,基本都是背后的 不同,在用户使用上体现不出。具体区别如下: 

    1.GET 请求是通过 URL 提交的,而 POST 请求则是 HTTP 消息实体提交的;

    2.GET 提交有大小限制(2KB),而 POST 方式不受限制;

    3.GET 方式会被缓存下来,可能有安全性问题,而 POST 没有这个问题;

    4.GET 方式通过$_GET[]获取,POST 方式通过$_POST[]获取。

    //使用$.post()异步返回 html 

    $.post('test.php',{

    url:'ycku'

    },function(response,status,xhr){

    $('#box').html(response);

    });

    $.getScript()和$.getJSON()

    jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的 JS 文件; $.getJSON(),用于专门加载 JSON 文件。 

    有时我们希望能够特定的情况再加载 JS 文件,而不是一开始把所有 JS 文件都加载了, 这时课时使用$.getScript()方法。 

    //点击按钮后再加载 JS 文件 

    $('input').click(function(){

    $.getScript('test.js');

    });

    $.getJSON()方法是专门用于加载 JSON 文件的,使用方法和之前的类似。 

    $('input').click(function(){

    $.getJSON('test.json',function(response,status, xhr){

    alert(response[0].url);

    });

    });

    $.ajax() 

    $.ajax()是所有 ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。 这个方法只有一个参数,传递一个各个功能键值对的对象。

    //$.ajax 使用 

    $('input').click(function(){

    $.ajax({ type:'POST',          //这里可以换成 GET

    url:'test.php',

    data:{

    url:'ycku'

    }, success:function(response,stutas,xhr){

    $('#box').html(response);

    }
    });
    });

    注意:对于 data 属性,如果是 GET 模式,可以使用三种之前说所的三种形式。如果是 POST 模式可以使用之前的两种形式。

    表单序列化 

    Ajax 用的最多的地方莫过于表单操作,而传统的表单操作是通过 submit 提交将数据传 输到服务器端。如果使用 Ajax 异步处理的话,我们需要将每个表单元素逐个获取才方能提 交。这样工作效率就大大降低。 

    //常规形式的表单提交 

    $('forminput[type=button]').click(function (){

    $.ajax({

    type:'POST',

    url:'test.php',

    data:{

    user:$('forminput[name=user]').val(),

    email:$('form input[name=email]').val()

    },

    success:function(response,status,xhr){

    alert(response);

    }

    });

    });

    使用表单序列化方法.serialize(),会智能的获取指定表单内的所有元素。这样,在面对 大量表单元素时,会把表单元素内容序列化为字符串,然后再使用 Ajax 请求。 

    //使用.serialize()序列化表单内容 

    $('forminput[type=button]').click(function (){

    $.ajax({

    type:'POST',

    url:'test.php',

    data:$('form').serialize(),

    success:function(response,status,xhr){

    alert(response);

    }

    });

    });

    .serialize()方法不但可以序列化表单内的元素,还可以直接获取单选框、复选框和下拉 列表框等内容。 

    //使用序列化得到选中的元素内容 

    $(':radio').click(function(){

    $('#box').html(decodeURIComponent($(this).serialize()));

    });

    除了.serialize()方法,还有一个可以返回 JSON 数据的方法:.serializeArray()。这个方法 可以直接把数据整合成键值对的 JSON 对象。 

    $(':radio').click(function(){

    console.log($(this).serializeArray());

    varjson=$(this).serializeArray();

    $('#box').html(json[0].value);

    });

    有时,我们可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同,这 个时候我们课时使用 jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。

    $('forminput[type=button]').click(function (){

    $.ajaxSetup({

    type:'POST',

    url:'test.php',

    data:$('form').serialize()

    });

    $.ajax({

    success:function(response,status,xhr){

    alert(response);

    }

    });

    });

    在使用 data 属性传递的时候,如果是以对象形式传递键值对,可以使用$.param()方法 将对象转换为字符串键值对格式。 

    varobj={a:1,b:2,c:3};

    varform=$.param(obj);

    alert(form);

    注意:使用$.param()将对象形式的键值对转为 URL 地址的字符串键值对,可以更加稳 定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限,所以直接传递 obj 对象要谨慎。

    注:以上教程均来源于北风网,特此声明!!!

  • 相关阅读:
    VisualStudio2010配置OpenCV的一种一劳永逸的方法
    QT5 Failed to load platform plugin "windows" 终极解决方式 命令行问题
    轻松学习JavaScript二十二:DOM编程学习之节点操作
    Eclipse中安装TestNG插件
    Java Timer 定时器的使用
    技术开发团队的项目管理工具
    python里一个class可以定义多个构造函数
    python中的多继承
    python基础之使用os.system来执行系统命令
    python下划线变量的含义
  • 原文地址:https://www.cnblogs.com/xiaoduc-org/p/5026475.html
Copyright © 2011-2022 走看看