Implementation code for using JSON in jQuery_jquery

The format description of JSON can be seen here, it is very detailed and it is in Chinese.

JSON format description

It is important to note that attribute names in JSON need to be enclosed in quotes.

Using JSON in jQuery

jQuery is a widely used script library now. So, how to use JSON in jQuery?

Parse JSON

Intrinsic support for parsing JSON is already provided in jQuery,

The jQuery.parseJSON function provides parsing support. For detailed instructions, see here.

Copy code The code is as follows:

var obj = jQuery.parseJSON('{"name" :"John"}');
alert( obj.name === "John" );

Using objects to generate JSON format strings

is not available in jQuery Provides a method to directly convert ordinary JavaScript objects into JSON strings, which can be accomplished using the following extension library.

jquery-json extension library

This library is used to extend jQuery and extends two methods for the use of JSON. The

toJSON method is used to serialize an ordinary JavaScript object into a JSON string.

Copy code The code is as follows:

var thing = {plugin: 'jquery-json', version: 2.3};
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}'

evalJSON method Parse a JSON string into a plain JavaScript object.

Copy code The code is as follows:

var thing = {plugin: 'jquery-json', version: 2.3};
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}'
var name = $.evalJSON( encoded ).plugin; // "jquery-json"
var version = $.evalJSON(encoded).version; // 2.3

The download address of this extension: http:/ /code.google.com/p/jquery-json/

Use jQuery with WCF
Client

$.post in jQuery can Make a request directly to the server and parse the data returned by the server in JSON format. However, you need to pay attention to the following points:

The requested content type must be in json format, which can be done through the jQuery-json extension library above To complete, special attention needs to be paid to the contentType of the request must also be described using text/json. The default post uses ordinary name-value pairs to request, so the contentType is: application/x-www-form-urlencoded, which can be passed $. ajaxSetup to set up:

Copy code The code is as follows:

// Ajax settings
$.ajaxSetup({ contentType: 'text/json' });

In this way, the requested content type is set to the required type.

Secondly, the actual request content must be in JSON mode, which can be achieved through $.toJSON of the extension library, for example:

$.toJSON({ x: 2, y: 3 } )

In this way, if the server side provides a service method Sum, defined as follows:

Copy code The code is as follows :

public int Sum(int x, int y)
{
return x y;
}

can be called as follows. Note that the data returned by WCF is in property d.

Copy code The code is as follows:

// Ajax settings
$.ajaxSetup({ contentType: 'text/json' });
$("#wcfBtn").click(function () {
$.post("Service1.svc/Sum", $.toJSON({ x: 2 , y: 3 }), function (data) {
alert(data.d);
});
});

Server-side configuration
First, add a label to the service: [System.ServiceModel.Activation.AspNetCompatibilityRequirements(
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]

Copy Code The code is as follows:

// #1
// In order to use it in a script, this tag must be added
[System.ServiceModel.Activation.AspNetCompatibilityRequirements(
RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode. Allowed)]
// #2
// It also needs to be set in the website configuration file
public class Service1 : IService1
{
public int Sum(int x, int y )
{
return x y;
}
}

Then, in the configuration file of the website, configure as follows.

Copy code The code is as follows:

/>







behavior>


>

Copy code

The code is as follows: ///////////1, In HTML, there is such a form:

/////////////Of course, if you want to use Js function in HTML, you must add
"/style/js/ajax.js">
//////////////2. Then add the following code to the ajax.js file
function userSearch( ){
var query = $("#searchform input[@name='query']").val();
$.post("/userSearch.htm", { query: query } ,function callback(json){
var userlist = $.parseJSON(json);
userList(userlist);
});
}
/*******************************************
Explanation as follows:
1), "#searchform input[@name='query']"; means: Select the input tag under the searchform (name attribute value is 'query') with id
2), $("" ).val() means to get ("") the value of the selected attribute;
3), in $.post(), the first parameter is to specify the target servlet, that is, to send this post request to That servlet.
The second item is the data carried by this post request; the one before ":" is the key or name, and the last one is the value;
The third item is the callback function. If there are formal parameters in it, it means that the request from The value returned by the servlet is processed. The function of the callback here is to convert the JSON object json into a JS object userlist, and then pass the JS object into the function userList
3. The post request carries a parameter named query to the background. Process in servlet:
//Get the data brought by post from the parameter named "query"
String query = request.getParameter("query");
if (query != null && !query.isEmpty()
&& !query.trim().equalsIgnoreCase("")) {
//If the value of "query" is not empty, use 'query' as the parameter to build HQL Statement
String hql = "from TUser as user where user.userName like '" query "%'";
//Query in the library table TUser and get a table structure
List list = weilav3TUserDAO .getListByHQL(hql);
if (list != null && !list.isEmpty()) {
//If the list is not empty, convert it into a JSON object and store it in jsonArray
JSONArray jsonArray = JSONArray.fromObject(list);
//The following is to return the JSON object containing the query results to the page
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(jsonArray);
……
}else {……}
************ **/