• 详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()


    详细解读JqueryAjax函数:$.get(),$.post(),$.ajax(),$.getJSON()

    一,$.get(url,[data],[callback])

    说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数。

    而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明

    复制代码代码如下:

    1. $.get("data.php",$("#firstName.val()"),function(data){
    2. $("#getResponse").html(data);}//返回的data是字符串类型
    3. );
     

     

    二,$.post(url,[data],[callback],[type])

    说明:这个函数跟$.get()参数差不多,多了一个type参数,type为请求 的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就 和$.get()返回的格式一样,都是字符串的

    复制代码代码如下:

     

    1. $.post("data.php",$("#firstName.val()"),function(data){
      1. $("#postResponse").html(data.name);
      2. },"json"//设置了获取数据的类型,所以得到的数据格式为json类型的
    2. );
     

     

    三,$.ajax(opiton)

    说明:$.ajax()这个函数功能强大,可以对ajax进行许多精确的控制,需要详细说明的请参照相关资料

    复制代码代码如下:

     

    1. $.ajax({
      1. url: "ajax/ajax_selectPicType.aspx",
      2. data:{Full:"fu"},
      3. type: "POST",
      4. dataType:'json',
      5. success:CallBack,
      6. error:function(er){
      7.     BackErr(er);
      8. }
    2. });
     

     

    四,$.getJSON(url,[data],[callback])复制代码代码如下:

     

    1. $.getJSON("data.php",$("#firstName.val()"),function(jsonData){
    2. $("#getJSONResponse").html(jsonData.id);}//无需设置,直接获取的数据类型为json,所以调用时需要使用jsonData.            //id方式
    3. );
     

     

    When Ajax meets jQuery 基于AJAX的应用现在越来越多,而对于前台开发人员来说,直接和底层的HTTPRequest打交道又不是一件令人愉快的事情。jQuery既然封装了 JavaScript,肯定已经考虑过AJAX应用的问题。的确,如果用jQueryAJAX会比直接用JS写方便N倍。(不知道用jQuery长了, 会不会丧失对JS的知识了……) 这里假设大家对jQuery语法已经比较熟悉,来对ajax的一些应用作一些总结。 

    载入静态页面

    load( url, [data], [callback] );

    url (String) 请求的HTML页的URL地址

    data (Map)(可选参数发送至服务器的 key/value 数据

    callback (Callback) (可选参数请求完成时(不需要是success)的回调函数

    load()方法可以轻松载入静态页面内容到指定jQuery对象。

    复制代码代码如下:

     

    $('#ajax-div').load('data.html');

     

    这样,data.html的内容将被载入到IDajax-divDOM对象之内。你甚至可以通过制定ID来实现载入部分内容的Ajax操作,如:

    复制代码代码如下:

     

    $('#ajax-div').load('data.html#my-section');

     

    实现GETPOST方法 

    get( url, [data], [callback] )

    url (String) 发送请求的URL地址.

    data (Map)(可选参数要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL

    callback (Callback) (可选参数载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)

    很显然这是一个专门实现GET方式的函数,使用起来也相当的简单

    复制代码代码如下:

     

    $.get('login.php', {

       id      : 'Robin',

       password: '123456',

       gate    : 'index'

      }, function(data, status) {

       //data为返回对象,status为请求的状态

       alert(data);

       //此时假设服务器脚本会返回一段文字"你好,Robin"

    那么浏览器就会弹出对话框显示该段文字

       alert(status);

       //结果为success, error等等,但这里是成功时才能运行的函数

      });

     

    post( url, [data], [callback], [type] )

    url (String) 发送请求的URL地址.

    data (Map)(可选参数要发送给服务器的数据,以 Key/value 的键值对形式表示

    callback (Callback) (可选参数载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)

    type (String) (可选参数请求数据的类型,xml,text,json

    同样是jQuery提供的一个简便函数,其实用法

    复制代码代码如下:

     

    $.post('regsiter.php', {

       id:'Robin',

       password: '123456',

       type:'user'

      },function(data, status) {

       alert(data);

      }, "json");





    一切为了梦想!
  • 相关阅读:
    java1.8版本的HashMap源码剖析
    java并发包——阻塞队列BlockingQueue及源码分析
    java多线程(二)-线程的生命周期及线程间通信
    单例设计模式的回顾。。。。
    java多线程的(一)-之java线程的使用
    根据IO流源码深入理解装饰设计模式使用
    IO流回顾与总结第一篇之字节流与字符流的操作。。。。。
    java中的异常类型以及区别????
    设计模式之装饰设计案例
    集合源码(一)之hashMap、ArrayList
  • 原文地址:https://www.cnblogs.com/wenqd/p/b64d5ab87541ae6209d233c417c37806.html
Copyright © 2020-2023  润新知