Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use Echarts to achieve the front-end ajax dynamic data back-end C #". In the daily operation, I believe that many people have doubts about how to use Echarts to achieve the front-end ajax dynamic data back-end C#. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for everyone to answer the doubts about "how to use Echarts to achieve the front-end ajax dynamic data back-end C #". Next, please follow the editor to study!

1. What is jquery?

JQuery is a lightweight "write less, do more" JavaScript library. JQuery greatly simplifies JavaScript programming.

2. What is ajax () 2.1introduction

AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML).

In short, AJAX loads the data in the background and displays it on the page without reloading the entire page.

With the jQuery AJAX method, you can use HTTP Get and HTTP Post to request text, HTML, XML, or JSON from a remote server-and you can load this external data directly into the selected elements of the web page.

Our traditional way to let the front end interact with the back end is through tags, but with ajax, we can let specific parts of the page directly change the content, thus reducing the large number of server requests each time the full page is loaded.

2.2 Code example

The following is a code snippet of the ajax method:

/ / obtain first-level classification / / author: Liu Rihui / / time: 2017.8.3function selectClassify () {$.ajax ({/ / back-end interaction type: "POST", / / back-end interactive address url: "/ Book/SelectClassifyOne", / / execute anonymous function function if the backend returns data successfully The following parameter item is the object data success returned from the backend: function (item) {/ / first analyze whether the object data is not empty if (item! = null & & item.length > 0) {/ / define two variables for looping and html code stitching var num = item.length Var html = "all"; / / Loop splicing code for (var I = 0; I < num; item.title +) {html + = "" + item.title + ";} / / call other functions $(" # inputClassificationFirst ") .html (html) SelectClassifySecond ();}}

We can see that the above code is used to load the content of a two-level linkage drop-down menu. When the page loads, js calls the selectClassify () function, which uses the ajax method.

The type in the code is using post mode or get mode to interact with the back end.

The url in the code is the address of the backend through which ajax interacts with the backend.

The success content in the code means that if the ajax is successfully connected to the backend, a function is executed after the connection is successful. The function is anonymous, and the parameter item in the function is

The object data that the backend wears back after the ajax connection is successful. Then ajax judges the back-end data as a non-empty object.

If the object is not empty, the for loop is used to perform a front-end html code stitching operation on the object data.

Call other functions after the code is stitched together.

2.3 Common parameters

1.url

Requires a parameter of type String (the default is the current page address) to send the requested address.

2.type

A parameter of type String is required, and the request method (post or get) defaults to get. Note that other http request methods, such as put and delete, can also be used, but only some browsers support them.

3.timeout

Requires a parameter of type Number to set the request timeout (in milliseconds). This setting overrides the global setting of the $.ajaxSetup () method.

4.async

A parameter of type Boolean is required. The default setting is true. All requests are asynchronous requests. If you need to send a synchronization request, set this option to false. Note that the synchronization request locks the browser, and the user must wait for the request to complete before performing other actions.

5.cache

A parameter of type Boolean is required. The default is true (when dataType is script, the default is false). Setting to false will not load the request information from the browser cache.

6.data

Data sent to the server is required for parameters of type Object or String. If it is no longer a string, it is automatically converted to string format. The get request will be appended to the url. To prevent this automatic conversion, you can check the processData option. The object must be in key/value format, such as {foo1: "bar1", foo2: "bar2"} converted to & foo1=bar1&foo2=bar2. If it is an array, JQuery automatically corresponds to the same name for different values. For example, {foo: ["bar1", "bar2"]} is converted to & foo=bar1&foo=bar2.

7.dataType

Requires a parameter of type String, the type of data expected to be returned by the server. If not specified, JQuery automatically returns responseXML or responseText based on the http package mime information and passes it as a callback function parameter. The available types are as follows:

Xml: returns the XML document, which can be processed with JQuery.

Html: returns plain text HTML information; the included script tag is executed when the DOM is inserted.

Script: returns plain text JavaScript code. The results are not automatically cached. Unless the cache parameter is set. Note that when a remote request is made (not under the same domain), all post requests will be converted to get requests.

Json: returns JSON data.

Jsonp:JSONP format. When calling a function in the form of SONP, for example, myurl?callback=?,JQuery will automatically replace the latter "?" Is the correct function name to execute the callback function.

Text: returns a plain text string.

8.beforeSend

It is required to be a parameter of type Function. You can modify the function of the XMLHttpRequest object before sending the request, such as adding a custom HTTP header. If false is returned in beforeSend, you can cancel this ajax request. The XMLHttpRequest object is the only parameter.

Function (XMLHttpRequest) {

This; / / the options parameter passed when this ajax request is called

}

9.complete

A parameter of type Function is required, and the callback function is called after the request is completed (called when the request succeeds or fails). Parameters: the XMLHttpRequest object and a string that describes the type of successful request.

Function (XMLHttpRequest, textStatus) {

This; / / the options parameter passed when this ajax request is called

}

10.success

A parameter of type Function is required. The callback function called after a successful request has two parameters.

(1) the data returned by the server and processed according to dataType parameters.

(2) A string that describes the status.

Function (data, textStatus) {

/ / data may be xmlDoc, jsonObj, html, text, etc.

This; / / the options parameter passed when this ajax request is called

}

11.error

Requires a parameter of type Function, the function to be called when the request fails. This function takes three parameters, namely, the XMLHttpRequest object, the error message, and the captured error object (optional). The ajax event function is as follows:

Function (XMLHttpRequest, textStatus, errorThrown) {

/ / usually only one of textStatus and errorThrown contains information

This; / / the options parameter passed when this ajax request is called

}

12.contentType

A parameter of type String is required, and the content encoding type defaults to "application/x-www-form-urlencoded" when sending information to the server. This default value is suitable for most applications.

13.dataFilter

A function that requires a parameter of type Function to preprocess the raw data returned by Ajax. Provide two parameters, data and type. Data is the raw data returned by Ajax, and type is the dataType parameter provided when jQuery.ajax is called. The value returned by the function will be further processed by jQuery.

Function (data, type) {

/ / return the processed data

Return data

}

14.dataFilter

A function that requires a parameter of type Function to preprocess the raw data returned by Ajax. Provide two parameters, data and type. Data is the raw data returned by Ajax, and type is the dataType parameter provided when jQuery.ajax is called. The value returned by the function will be further processed by jQuery.

Function (data, type) {

/ / return the processed data

Return data

}

15.global

A parameter of type Boolean is required, and the default is true. Indicates whether a global ajax event is triggered. Setting to false will not trigger global ajax events, and ajaxStart or ajaxStop can be used to control various ajax events.

16.ifModified

A parameter of type Boolean is required, and the default is false. Get new data only when the server data changes. The judgment of server data change is based on Last-Modified header information. The default value is false, which ignores header information.

17.jsonp

The name of the callback function is overridden in an jsonp request if it is required to be a parameter of type String. This value is used instead of in "callback=?" The "callback" part of the URL parameter in such a GET or POST request, such as {jsonp:'onJsonPLoad'}, results in a "onJsonPLoad=?" Pass it to the server.

18.username

A parameter of type String required to respond to the user name of the HTTP access authentication request.

19.password

A parameter of type String is required for the password used in response to the HTTP access authentication request.

20.processData

A parameter of type Boolean is required, and the default is true. By default, the data sent is converted to an object (not a string technically) to match the default content type "application/x-www-form-urlencoded". If you want to send DOM tree information or other information that you do not want to convert, set it to false.

21.scriptCharset

A parameter of type String is required, which is used to force the modification of the character set (charset) only if the dataType is "jsonp" or "script" at the time of the request, and type is GET. Local and remote content encoding is usually not used at the same time.

Case code:

/ / author: Liu Rihui / / time: 2017.6.2 $(function () {$('# send') .click (function () {/ / ajax Code $.ajax) ({/ / interaction type with backend type: "GET", / / interaction address with backend url: "test/json" / / the data to be transmitted to the backend on this page If you need to be separated by commas, you need to pass two pieces of data to the backend, username and content / / $("# username"). Val () is also the use of jquery, that is, to get the control value whose ID of html is username. Content is the same as data: {username:$ ("# username") .val (), content:$ ("# content") .val ()}, / / the data type of the interaction is json format dataType: "json", / / if the interaction is successful, the backend will return object data The object data is stored in the data variable at the front end / / of course, this variable is written casually. Just see the name success: function (data) {$('# resText'). Empty () / / clear all the contents of resText var html ='' / / create a variable / / the following is the way to traverse the object with jquery's each, which is actually the same as the for loop It's just better to use $.each (data, function (commentIndex, comment) {html + =''+ comment ['username'] +':

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.