Method of getting Json value from jQuery+ajax+asp.net

  • 2021-06-28 08:22:50
  • OfStack

This paper gives an example of how jQuery+ajax+asp.net can get Json value.Share it for your reference, as follows:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQueryAjaxJson Example Value </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, // Load Execution Method 
          error: erryFunction, // Error Execution Method 
          success: succFunction // Method executed successfully 
        })
        function LoadFunction() {
          $("#ddd").html(' Loading ...');
        }
        function erryFunction() {
          alert("error");
        }
        function succFunction(tt) {
          $("#ddd").html('');
          var json = eval(tt); // array 
          $.each(json, function (index, item) {
            // Loop through data 
            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=" Obtain json data " />
  <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'); // Publish Page 
  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, // synchronization 
      beforeSend: LoadFunction, // Load Execution Method 
      error: erryFunction, // Error Execution Method 
      success: succFunction // Method executed successfully 
    })
    function LoadFunction() {
      showLoad(" Running ...");
    }
    function erryFunction() {
      $("#contentdiv").html("<p style=\"padding:5px\"><img src=\"images/error.png\" />sorry , failed to submit </p>");
      closeLoad();
    }
    function succFunction(tt) {
      closeLoad();
      $("#contentdiv").show().html(tt);
    }
  } else {
    alert(" Please select before proceeding ");
  }
}


using System;
// Newly added 
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 = " Zhang 3";
      c.Age = 23;
      c.Sex = " male ";
      list.Add(c);
      Student cc = new Student();
      cc.Name = " plum 4";
      cc.Age = 25;
      cc.Sex = " male ";
      list.Add(cc);
      Student ccc = new Student();
      ccc.Name = " Li Ling ";
      ccc.Age = 25;
      ccc.Sex = " female ";
      list.Add(ccc);
      Response.ContentType = "application/json";
      Response.Write(new JavaScriptSerializer().Serialize(list));//// This is critical, otherwise error
      Response.End();
    }
  }
  public struct Student
  {
    public string Name;
    public int Age;
    public string Sex;
  }
}

PS: Here we recommend several online operation tools in json format for your free use. We believe they can be used in future development:

Online JSON code inspection, inspection, beautification, formatting tools:
http://tools.ofstack.com/code/json

Online XML/JSON Interchange Tool:
http://tools.ofstack.com/code/xmljson

C Language Style/HTML/CSS/json Code Formatting Beautification Tool:
http://tools.ofstack.com/code/ccode_html_css_json

json Code Online Format/Beautify/Compress/Edit/Convert Tool:
http://tools.ofstack.com/code/jsoncodeformat

More readers interested in jQuery-related content can view this site's topics: Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Dragging Special Effects and Skills Summary, jQuery Extension Skills Summary, jQuery General Classic Special Effects Summary, jQuery Animation and Usage Summary,Summary of Usage of jquery Selector and jQuery Common Plugins and Usages

I hope that the description in this paper will be helpful to everyone's jQuery program design.


Related articles: