In Ajax interactions, we have xml,html,script,json,jsonp,text of data types returned from the server side, and this article takes JSON as an example of two data structures that use jquery to traverse json in the foreground: a collection of name/value pairs, The ordered list of values, and the ordered list of values, contains a collection of "name/value" pairs, and on the server side, we use the json.net to serialize data structures such as arraylist,hashtable,list<>.
Before we start, we need to download json.net, after downloading, add a reference to the Web site, open the downloaded folder, If it is. net2.0 above, use the Newtonsoft.Json.dll in the Donet folder, if it is a version of 2.0, use the Newtonsoft.Json.dll under DotNet20 file, and then import its namespaces on the pages used Using Newtonsoft.json;
After the preparations are finished, start the demo by adding the WebService file named Productservice.asmx, and then uncomment the [System.Web.Script.Services.ScriptService].
1, traversing the "name/value" pairs of the collection
Productservice.asmx Add Getproductinfotojson method
Copy Code code as follows:
[WebMethod]
public string Getproductinfotojson (int productID)
{
SQLCMD = new SqlCommand ("Select Id,name,price from Dbo.producttest where id= @id", SQLConnect);
Sqlcmd.commandtype = System.Data.CommandType.Text;
SQLCMD. Parameters.addwithvalue ("@id", ProductID);
Sqlconnect.open ();
SqlDataReader reader = SQLCMD. ExecuteReader ();
Hashtable Htresult = new Hashtable ();
while (reader. Read ())
{
Htresult.add ("id", reader["id"]);
Htresult.add ("name", reader["name");
Htresult.add ("Price", "reader[");
}
Reader. Close ();
Sqlconnect.close ();
Return Jsonconvert.serializeobject (Htresult);
}
Front desk
Copy Code code as follows:
$ ("#ShowInfo"). Click (function () {
var Selectvalue = $ ("#DropDownListCourseID"). Val ();
$.ajax ({
Type: "POST",
URL: "Productservice.asmx/getproductinfotojson",
Data: "{productID:" + Selectvalue + "}",
ContentType: "Application/json; Charset=utf-8 ",
DataType: "JSON",
Success:function (msg) {
var result = Jquery.parsejson (MSG.D);
$ ("#resultInfo"). Append (result.id + result.name + result.price+ "<br/>");
}
});
});
2, traversing the ordered list of values
Copy Code code as follows:
Productservice.asmx Add Getproductlist method
[WebMethod]
public string Getproductlist (string KeyWord) {
SQLCMD = new SqlCommand ("Getproductlist", SQLConnect);
Sqlcmd.commandtype = CommandType.StoredProcedure;
SQLCMD. Parameters.Add (New SqlParameter ("@nameKeyWords", SqlDbType.NVarChar, 30));
SQLCMD. parameters["@nameKeyWords"]. Value = KeyWord;
Sqlconnect.open ();
SqlDataReader reader = SQLCMD. ExecuteReader ();
ArrayList productlist = new ArrayList ();
while (reader. Read ())
{
Productlist.add (reader["name"). ToString ());
}
Reader. Close ();
Sqlconnect.close ();
if (Productlist.count > 0)
{
Return Jsonconvert.serializeobject (productlist);
}
Else
{
Return "";
}
}
Front desk:
Copy Code code as follows:
var suggestlist = $ (' <ul class= ' autocomplete ' </ul> '). Hide (). InsertAfter ("#search #search-text");
$ ("#search-text"). KeyUp (function () {
var textstring = "{KeyWord: '" + $ ("#search #search-text"). attr ("value") + "'}"
$.ajax ({
Type: "POST",
URL: "Productservice.asmx/getproductlist",
Data:textstring,
ContentType: "Application/json; Charset=utf-8 ",
DataType: "JSON",
Success:function (data) {
Suggestlist.empty ();
var objdata = Jquery.parsejson (DATA.D);
$.each (objdata, function (index, term) {
$ ("<li></li>"). Text (term). Appendto (Suggestlist);
});
Suggestlist.show ();
}
});
});
3, traversing the value of the ordered list containing the "name/value" pairs of the collection
Copy Code code as follows:
Productservice.asmx Add Getbrandnamebykeyword method
[WebMethod]
public string Getbrandnamebykeyword (string Keyword)
{
SQLCMD = new SqlCommand ("Brandinfo_get_brandname_userinputkeyword", SQLConnect);
Sqlcmd.commandtype = CommandType.StoredProcedure;
SQLCMD. Parameters.Add (New SqlParameter ("@KeyWord", sqldbtype.nvarchar,10));
SQLCMD. parameters["@KeyWord"]. Value = Keyword;
Hashtable Brandnameinfo;
listSqlconnect.open ();
using (SqlDataReader reader = SQLCMD. ExecuteReader ())
{
if (reader. HasRows)
{
while (reader. Read ())
{
Brandnameinfo = new Hashtable ();
Brandnameinfo.add ("brandname", reader["brandname"). ToString ());
Brandnameinfo.add ("Brandchinesename", reader["Brandchinesename"). ToString ());
Brandnameinfo.add ("Nameabbreviation", reader["Nameabbreviation"). ToString ());
Brandnameinfocollection.add (Brandnameinfo);
}
Sqlconnect.close ();
Return Jsonconvert.serializeobject (brandnameinfocollection);
}
Else
{
Sqlconnect.close ();
return null;
}
}
}
Front desk
Copy Code code as follows:
$.ajax ({
Type: "POST",
URL: "Productservice.asmx/getreceiveraddressinfo",
Data: "{}",
ContentType: "Application/json; Charset=utf-8 ",
DataType: "JSON",
Success:function (msg) {
var resultcollection = Jquery.parsejson (MSG.D);
$.each (resultcollection, function (index, item) {
var addressinfo = [
"<input type=" Radio "name=" Receiveaddress "class=" Address "value=", Item.id, ' "/> <label class=" Vtip "title=" <font size=3><b> recipient:</b> ', item. Receivername, ' </br><b> contact number:</b> ', item. Receiverphoneno, ' </br><b> detailed address:</b> ', item. Detailsaddress, ' </font> ' > ', item. Noticewords, ' </label></br> '
].join (");
});
}
});
In 1.41, JQuery added the Jquery.parsejson (JSON) method, which is defined as takes a well-formed JSON string and returns the resulting JavaScript Object. is to accept a well-formed JSON string and return a JavaScript object.
This greatly facilitates the processing of the JSON strings that we generate on the server side in the foreground.
Okay, so here's a description of jquery traversing the JSON two data structures.
