Earlier in the winter vacation, I tried to use jQuery to write several asynchronous requests for demo.

But that is the use of ordinary webform pages, generally should be the majority of web services.

When writing background management recently, I want to use asynchrony to display and modify some information.

This is the first time that ajax is actually used in practice, and it takes an hour for the card to display simple information.

There are two problems. Write it down and share it with you, and deepen your impression.

Where there is a mistake, please ask God to point it out.

Front-end js code:

 1     <script type="text/javascript">
 2         $(function () {
 3             $("#details").hide();
 4             $(".details").click(function () {
 5                 showdetails($(this).attr("id"));
 6             });
 7         })
 8 
 9         function showdetails(id) {
10             $.ajax({
11                 url: "article.asmx/GetArticleByID",
12                 type: "POST",
13                 datatype: "json",
14                 data:'{ id: ' + id + ' }',
15                 contentType: "application/json; charset=utf-8",
16                 success: function (data) {
17                     var json = null;
18                     try {
19                         json = eval('(' + data.d + ')');
20                     }
21                     catch (e) {
22                         alert(e.message);
23                     }
24                     $("#id").text(json.ID);
25                     $("#title").text(json.Title);
26                     $("#time").text(json.Time);
27                     $("#text").text(json.Text);
28                     $("#details").show();
29                 }
30             });
31     </script>

Front-end html code

 1 //Where to click
 2 <td><a class="details" id="<% =Convert.ToInt32(article.ID) %>">detailed</a></td>
 3 
 4 //Where to insert information
 5     <div id="details">
 6         <table>
 7             <tr>
 8                 <td id="id"></td>
 9                 <td id="title"></td>
10                 <td id="time"></td>
11                 <td id="text"></td>
12             </tr>
13         </table>
14     </div>

Web service code

 1     [WebService(Namespace = "http://tempuri.org/")]
 2     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 3     [System.ComponentModel.ToolboxItem(false)]
 4     // To allow use ASP.NET AJAX Call this from the script Web Service, please cancel the comment below. 
 5     [System.Web.Script.Services.ScriptService]
 6     public class article : System.Web.Services.WebService
 7     {
 8 
 9         [WebMethod]
10         public string GetArticleByID(int id)
11         {
12             ArticleBLL article = new ArticleBLL();
13             article = ArticleBLL.GetArticleByID(id);
14 
15             //string s = string.Empty;
16             //s = "{\"id\":\""+article.ID+"\",\"title\":\""+article.Title+"\",\"text\":\""+article.Text+"\",\"time\":\""+article.Time+"\"}";
17             //return s;
18 
19             JavaScriptSerializer js = new JavaScriptSerializer();
20             return js.Serialize(article);
21 
22             //Context.Response.Write(s);
23             //Context.Response.End();
24         }
25     }

The first problem we encountered was that 500 errors were detected in the data format when transmitting information.

Add contentType: "application/json; charset=utf-8" to report an error.

This statement tells the server that we passed the information in json format in the past, so when it can't be parsed, the error message will be returned.

data to be written as

data: '{ id: ' + id + ' }'

data must be a "string representing a JSON object" rather than a "JSON" object

The reason is that jquery serializes JSON objects into standard POST formats. Your {id: id} here will be in the form of good id=3, while ASP.NET Web Service needs JSON-formatted data, so you have to turn your data into a JSON-like string.

The second problem is that if the request succeeds, the return data format is correct, but it does not show.

The data returned by default is in xml format, where I use JavaScript Serializer JS = new JavaScript Serializer (); return js. Serialize (article); to return json format information.

The code that was finally commented out was seen on the internet. It output plain text and could be recognized by browsers, but I didn't test it. It should be possible.

It turns out that it needs to be parsed. This process is called deserialization.

We just need to get the d attribute of the return string from jquery under eval in the success callback function to get the actual json object.

As follows, if the method returns information like {"d": "{" Title ":" Article Title "}, how can we get the value of msg?

First of all, it must be clear that the actual json format string obtained after calling the method of webservice is {"d":"{\"Title\":\" Article Title\"},

The json object generated by jquery through this string has only one attribute, that is, d, which stores string information in json format returned by web service method, rather than json object.

So you can't get ID information through data.d.ID. Instead, var json=eval('('+data.d+)') is needed to generate the actual json object, and then josn.ID is the required information.

In fact, you can parse xml data directly, but it's a little more troublesome than json

http://www.cnblogs.com/qiantuwuliang/archive/2009/11/23/1609117.html

This article describes how to parse xml data.

Refer to http://www.cnblogs.com/tianguook/archive/2010/12/04/1896485.html

Reproduced please retain the source.