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.