jQuery+ajax+asp.net獲取Json值的方法

字號:


    本文實例講述了jQuery+ajax+asp.net獲取Json值的方法。分享給大家供大家參考,具體如下:
    代碼如下:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>jQueryAjaxJson取值示例</title>
      <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function () {
          $("#Button1").click(function () {
            $.ajax({
              url: 'AjaxQuery.aspx',
              type: 'GET',
              dataType: 'json',
              timeout: 1000,
              cache: false,
              beforeSend: LoadFunction, //加載執(zhí)行方法
              error: erryFunction, //錯誤執(zhí)行方法
              success: succFunction //成功執(zhí)行方法
            })
            function LoadFunction() {
              $("#ddd").html('加載中...');
            }
            function erryFunction() {
              alert("error");
            }
            function succFunction(tt) {
              $("#ddd").html('');
              var json = eval(tt); //數(shù)組
              $.each(json, function (index, item) {
                //循環(huán)獲取數(shù)據(jù)
                var name = json[index].Name;
                var age = json[index].Age;
                var sex = json[index].Sex;
                $("#ddd").html($("#ddd").html() + "<br>" + name + " - " + age + " - " + sex + "<br/>");
              });
            }
          });
        })
      </script>
    </head>
    <body>
      <input type="button" id="Button1" value="獲取json數(shù)據(jù)" />
      <span id="ddd"></span>
    </body>
    </html>
    代碼如下:
    //Ajax Post Text
    function savedata(tempid) {
      var tid = $('#hidtemplate').attr('value');
      var desc = $("#contentdiv").html();
      var num_iid = $("#num_iidArr").attr('value');
      var num_iid2 = $("#num_iidArr001").attr('value'); //發(fā)布頁面
      var topsvalue = $("#tops").attr('value');
      if (num_iid != "" && num_iid2 != "") {
        $.ajax({
          url: 'TabBaoHandler.ashx',
          type: 'POST',
          data: 'type=3&num_iid=' + num_iid2 + '&tid=' + tid + '&desc=' + desc + '&top_session=' + topsvalue,
          dataType: 'text',
          timeout: 20000,
          cache: false,
          //async: false, //同步
          beforeSend: LoadFunction, //加載執(zhí)行方法
          error: erryFunction, //錯誤執(zhí)行方法
          success: succFunction //成功執(zhí)行方法
        })
        function LoadFunction() {
          showLoad("正在運行中...");
        }
        function erryFunction() {
          $("#contentdiv").html("<p style=\"padding:5px\"><img src=\"images/error.png\" />sorry,提交失敗</p>");
          closeLoad();
        }
        function succFunction(tt) {
          closeLoad();
          $("#contentdiv").show().html(tt);
        }
      } else {
        alert("請選擇后再操作");
      }
    }
    代碼如下:
    using System;
    //新增
    using System.Web.Script.Serialization;
    using System.Collections.Generic;
    public partial class AjaxQuery : System.Web.UI.Page
    {
      protected void Page_Load(object sender, EventArgs e)
      {
        if (!IsPostBack)
        {
          List<Student> list = new List<Student>();
          Student c = new Student();
          c.Name = "張三";
          c.Age = 23;
          c.Sex = "男";
          list.Add(c);
          Student cc = new Student();
          cc.Name = "李四";
          cc.Age = 25;
          cc.Sex = "男";
          list.Add(cc);
          Student ccc = new Student();
          ccc.Name = "李玲";
          ccc.Age = 25;
          ccc.Sex = "女";
          list.Add(ccc);
          Response.ContentType = "application/json";
          Response.Write(new JavaScriptSerializer().Serialize(list));////這個很關(guān)鍵,否則error
          Response.End();
        }
      }
      public struct Student
      {
        public string Name;
        public int Age;
        public string Sex;
      }
    }
    希望本文所述對大家jQuery程序設(shè)計有所幫助。