AJAX请求 $.getJson方法的使用

使用jQuery的$.getJson方法可以异步的获取服务器端返回的json字符串。

$.getJson方法语法

$.getJson(url,parameters,callback)

参数

url

(字符串)将要通过GET方法进行交互的服务器端资源的url。

parameters

(对象)一个对象,其属性作为“键/值”用于构造查询字符串并追加到url;或者一个预格式化和uri编码的查询字符串。

callback

(函数)回调函数,在请求完成时被调用。把响应体解析为json字符串,这个字符串的值作为第一个参数传递到这个回调函数,响应状态作为第二个参数传递到该函数

返回值

XHR实例

下面看个例子

客户端代码

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$().ready(function () {

  $('#clk').click(function () {

    var num = $(this).val();

    $.getJSON('Server.aspx',callback)

  })

  function callback(json,status) {

    $.each(json,function (i) {

      $('#show').append('name:' + json[i]['Name'] + 'age:' + json[i]['Age'] + '<br/>');

    })

  }

})

</script>

</head>

<body>

<input id="clk" type="button" value="button" />

<div id="show">

</div>

</body>

</html>


服务端主要代码

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.Script.Serialization;//适用于.NetFramework 3.5

 

public partial class Server : System.Web.UI.Page

{

  protected void Page_Load(object sender,EventArgs e)

  {

    if (!Page.IsPostBack)

    {

      //List<Person> per = new List<Person>();

      //per.Add(new Person("张三",18));

      //per.Add(new Person("李四",19));

      //JavaScriptSerializer jsonHelper = new JavaScriptSerializer();

      //string json = jsonHelper.Serialize(per);

      //Response.Write(json);

      Response.Write(GetJSONData());

    }

  }

  protected string GetJSONData()

  {

    string str = string.Empty;

    //特别要注意json的返回格式,如果格式不正确将不能正常调用客户端的回调函数

    str = "[{\"Name\":\"张三\",\"Age\":\"14\"}," +

    "{\"Name\":\"李四\",\"Age\":\"17\"}," +

    "{\"Name\":\"王五\",\"Age\":\"19\"}]";

    return str;

  }

 

  public class Person

  {

    private string name;

    private int age;

    public string Name

    {

      get { return name; }

      set { name = value; }

    }

    public int Age

    {

      get { return age; }

      set { age = value; }

    }

 

    public Person(string name,int age)

    {

      this.name = name;

      this.age = age;

    }

  }

}

运行程序,结果如图:

如果你不熟悉json格式,也不要紧。可以使用System.Web.Script.Serialization(framework 3.5)命名空间下为格式化为json的帮助类。我们可以把服务器端Page_Load事件中注释的代码变为可用。把Response.Write(GetJSONData())这句注释掉。再运行程序,结果没有问题,如下图。它把类直接格式化为json字符串,省去了很多时间。

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...