Jquery 中 $.getJSON的用法

之前类似的方法用过 $.post, $.get,$.ajax,还是第一次用这个 $.getJSON。

前三个都是用作异步请求的,那么最后一个呢?其实也是异步请求的,和 $.get 最类似,因为他也是将数据放在了 url上面。

代码:

// 页面一加载就请求服务器,获取当前用户的笔记本数据
function loadPageNotebooks() {
    var page = $(document).data('page');
    var userId = getCookie('userId');
    var url = 'notebook/page.do';
    var data = {
        userId : userId,
        page : page
    };
    // 从服务器拉取数据
    $.getJSON(url, data, function(result) {
        console.log(result);
        if (result.state == 0) {
            var notebooks = result.data;
            showPageNotebooks(notebooks, page);
            $(document).data('page', ++page);
        } else {
            alert(result.message);
        }
    });
}

后台代码:

    /**
     * 获取当前用户的全部笔记本,以json的形式响应回去
      * @param userId
     * @param page
     * @return
     */
    @RequestMapping("/page.do")
    @ResponseBody
    public Object page(String userId, Integer page) {
        List<Map<String, Object>> list = notebookService.listNotebooks(userId, page);
        return new JsonResult(list);
    }

小总结:

$.getJSON() 是专门为 ajax 获取 json 数据而设置的,并且支持"跨域"调用,其语法的格式为:

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

其中三个分别为:

  • url:string类型, 发送请求地址
  • data :可选参数, 待发送 Key/value 参数 ,同 get,post 类型的 data
  • callback :可选参数,载入成功时回调函数,同 get,post 类型的 callback

        JSON 是一种理想的数据传输格式,它能够很好的融合与 JavaScript 或其他宿主语言,并且可以被 JS 直接使用。使用 JSON 相比传统的通过 GET、POST 直接发送“裸体”数据,在结构上更为合理,也更为安全。至于 jQuery 的 getJSON() 函数,只是设置了 JSON 参数的 ajax() 函数的一个简化版本。这个函数也是可以跨域使用的,相比 get()、post() 有一定优势。另外这个函数可以通过把请求 url 写成 "myurl?callback=X" 这种格式,让程序执行回调函数X。
注:

      数据最终还是通过 url 后面通过 get 方式发送数据出去的,这就决定了,发送的 data 数据量不能太多【get方式最大4KB】,否则造成 url 太长接收失败(getJSON方式是不可能有post方式递交的)。 

posted @ 2017-06-16 23:50  码上猿梦  阅读(7860)  评论(0编辑  收藏  举报