jQuery AJAX —篇四 $.getJSON()

  回顾

  jQuery AJAX 的方法已经学了几个,这次又学习了$.getJSON()方法,对比这些方法的实现,发现原理和语法上都是很相像的,jQuery的这种封装和实现真使得AJAX的实现变得统一和简单。

  $.getJSON()认识

    从方法的名字上容易知道,通过GET方式获取JSON数据。JSON是什么,请看这里JSON学习及解析

  $.getJSON() 语法

        getJSON(url,[data],[callback])
参数
说明
url
必需。规定将请求发送的URL.
data
可选。待发送 Key/value 参数.
callback 可选。载入成功时回调函数.
  参数和其它jQuery AJAX的方法参数所代表一样。

  相当于$.get: $.get(url, [data],[callback], "json")

  也相当于$.AJAX的简写:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

  $.getJSON()小例

  调用后台asp.net页面(一般应用程序)生成的json数据

  前台页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jquery获取json数据</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    function getData(){
      $("#list").html("");     //清空列表中的数据
      //发送ajax请求
      $.getJSON(
        "jsondata.ashx",     //产生JSON数据的服务端页面
        {name:"test",age:20},  //向服务器发出的查询字符串(此参数可选)
        //对返回的JSON数据进行处理,本例以列表的形式呈现
        function(json){
          //循环取json中的数据,并呈现在列表中
          $.each(json,function(i){
            $("#list").append("<li>name:"+json[i].name+" Age:"+json[i].age+"</li>")
          })
        })
     }
  </script>
</head>
<body>
  <input id="Button1" type="button" value="获取数据" onclick="getData()" />
  <ul id="list"></ul>
</body>
</html> 

  一般应用程序(jsonData.ashx)

<%@ WebHandler Language="C#" Class="jsonData" %>
using System;
using System.Web;

public class jsonData : IHttpHandler {
  public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";
    string data = "[{name:\"ants\",age:24},{name:\"lele\",age:23}]";     //构建的json数据
    //下面两句是用来测试前台向此页面发出的查询字符
    string querystrname = context.Request.QueryString.GetValues("name")[0]; //取查询字符串中namer的值
    string querystage = context.Request.QueryString.GetValues("age")[0];  //取查询字符串中age的值
    context.Response.Write(data);
  }
  public bool IsReusable {
    get {
     return false;
    }
  }
} 

  运行结果:JSON的数据。


  未完结

  第四个"未完结",学习无止境,jQuery AJAX的认识阶段暂告一段落。不怕不知道,就怕不知道,在项目中能想到,才能用到,才能高效的发挥它的作用。


jQuery AJAX —篇四 $.getJSON()

上一篇:2021-01-10:linux中,我要看某一个进程的并发,通过什么命令去查?


下一篇:eclipsej将JAVAWEB SSH打包war文件