zoukankan      html  css  js  c++  java
  • jquery Ajax 方法返回数据的获取,包括JSON,XML,TXT dodo

    JQuery提供了一系列的全局方法对XMLHttpRequest对象进行了封装,在进行Ajax开发过程中再也不用担心浏览器客户端的不致性问题了。

    一、$.ajax(options)
    它是最根本的JQuery Ajax方法,它只有一个参数options,该options参数中包含了请求信息和回调函数的信息。参数内容都是key:value对形式出现,并且都是可选的。
    语法:
    $.ajax({options});
    url
    :(string)发送请求的地址,可以是服务器页面也可以是WebService动作。
    type:(string)请求方式,POST或GET
    data:(object)向服务器发送请求时带去的数据。是key:value对形式,如:{name:"grayworm",sex:"male"},如果是数组{works:["work1","work2"]}
    dataType:(string)预期返回的数据类型。xml,html,json,text等
    beforeSend:(Function)发送ajax请求前被触发,如果返回false则取消本次请求。如果异步请求需要显示gif动画,那应当在这里设置相应<img>的可见。
    function(XMLHttpRequest){ }

    complete:(Function)请求调用完成后的回调函数(请求成功或失败时均调用),如果异步请求显示gif动画,那应当在这里设置相应的<img>不可见。
    function(XMLHttpRequest,textStatus){
       //textStatus是描述返回状态的字符串
    }

    success:(Function)请求执行成功时的回调函数
    function(data,textStatus){
       //data是服务端返回的数据可以是xml、json、text等格式
       //textStatus是描述返回状态的字符串
    }

    error:(Function)请求执行失败时的回调函数
    function(XMLHttpRequest,textStatus,errorThrown){
       //data是服务端返回的数据可以是xml、json、text等格式
       //textStatus,errorThrown是描述返回状态的信息
    }

    应用举例:
    1.向页面发出请求,返回XML格式数据
    页面端代码:


    《图3》
    JQuery代码:


    《图1》

    2.向页面发出请求,返回Json格式数据
    页面端代码:


    《图4》
    JQuery代码:


    《图2》

    3.向WebService发出请求,无参返回简单类型异步调用
    服务端代码:


    《图5》
    JQuery代码:


    《图6》

    4.向WebService发出请求,有参返回简单类型异就调用
    服务端代码:


    《图7》
    JQuery代码:


    《图8》

    5.向WebService发出请求,返回实体对象的异步调用
    服务端代码:


    《图9》
    JQuery代码:


    《图10》

    6.向WebService发出请求,返回集合对象的异步调用
    服务端代码:


    《图11》
    JQuery代码:


    《图12》

    说明:
            WebService请求类型都为Post,WebService的Url为“[WebServiceUrl]/[WebMethod]”
            data要用Json的字符串格式传入
            设置了dataType为json后,result就直接为返回的Json对象。

    二、$.get()和$.post()
    $.ajax()是最基本的Ajax方法,在JQuery中又提供了两个简捷的Ajax调用方法$.get()和$.post(),这两个方法实现了对$.ajax()的封装。有了$.ajax()的基础,下面两个方法学习起来就很简单了。
    1.$.get()
    语法:
    $.get(url [,data] [,callback] [,type])
    url:(string)请求的HTML页的URL地址
    data:(object)发送到服务器的数据,以key/value对形式书写,如:{name:"张三",age:"18"}
    callback:(function)回调函数,只有返回的状态是success时才调用该方法。
    type:(string)服务端返回的内容的格式。xml,html,json,text等

    2.$.post()
    语法:
    $.post(url [,data] [,callback] [,type])
    url:(string)请求的HTML页的URL地址
    data:(object)发送到服务器的数据,以key/value对形式书写,如:{name:"张三",age:"18"}
    callback:(function)回调函数,只有返回的状态是success时才调用该方法。
    type:(string)服务端返回的内容的格式。xml,html,json,text等

    $.post()与$.get()很相似,只是数据参数传递方式不一样,这二者与传统的get/post提交方式相同。

    应用举例:
    1.$.get()和$.post()向页面发送异步请求,返回XML数据
    服务端代码:


    《图3》
    JQuery代码:


    《图13》

    2.$.get()和$.post()向页面发送异步请求,返回json数据
    服务端代码:


    《图4》
    JQuery代码:


    《图14》
    3.$.get()和$.post()向WebService发送异步请求


    《图15》:

    三、序列化元素
    如果页面表单元素比较多,在发出ajax请求的时候需要将表单中所有的元素一起发送到服务端,如果还是使用key/value对形式的json语法传递参数的话,那需要在$.get()或$.post()中手写很长的json参数。
    在JQuery中为我们提供了序列化的方式来解决这个问题,序列化的方法是serialize()
    示例代码:


    《图16》


    《图17》

  • 相关阅读:
    Week2实验 B--爆零(❌)大力出奇迹(√) HDU
    Windows10家庭版安装Docker(不是DockerToolbox)
    Ubuntu搭建DNS服务器遇到的问题1
    Ubuntu执行apt-get时遇到的问题1
    Windows2000下vc++6.0编译出现“Error spawning cl.exe”
    win2000安装官方发布的最后一个补丁KB891861
    Windows2000密钥
    Linux下使用gets和puts方法出现的错误
    执行.sh文件调用变量时出现“未找到命令”
    SQL Server2012无法连接到服务器
  • 原文地址:https://www.cnblogs.com/zgqys1980/p/2227974.html
Copyright © 2011-2022 走看看