怎么使用Echarts實(shí)現(xiàn)前端ajax動態(tài)數(shù)據(jù)后端C#

這篇文章主要介紹“怎么使用Echarts實(shí)現(xiàn)前端ajax動態(tài)數(shù)據(jù)后端C#”，在日常操作中，相信很多人在怎么使用Echarts實(shí)現(xiàn)前端ajax動態(tài)數(shù)據(jù)后端C#問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用Echarts實(shí)現(xiàn)前端ajax動態(tài)數(shù)據(jù)后端C#”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司專注于大峪網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠為您提供大峪營銷型網(wǎng)站建設(shè)，大峪網(wǎng)站制作、大峪網(wǎng)頁設(shè)計(jì)、大峪網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造大峪網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供大峪網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

1、什么是jquery?

jQuery 是一個(gè)輕量級的"寫的少，做的多"的JavaScript庫。jQuery 極大地簡化了 JavaScript 編程。

2、什么是ajax()

2.1簡介

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

簡短地說，在不重載整個(gè)網(wǎng)頁的情況下，AJAX 通過后臺加載數(shù)據(jù)，并在網(wǎng)頁上進(jìn)行顯示。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請求文本、HTML、XML 或 JSON - 同時(shí)您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。

我們傳統(tǒng)的讓前端與后端交互的方式就是通過<form></form>標(biāo)簽，但是有了ajax后，我們可以讓頁面特定部分直接改變內(nèi)容，從而減少了每次全部頁面加載的時(shí)候大量的服務(wù)器請求。

2.2代碼例子

下面是一個(gè)ajax方法的代碼片段：

//獲取一級分類
//作者：劉日輝
//時(shí)間：2017.8.3
function selectClassify() {
    $.ajax({
        //后端的交互方式
        type: "POST",
        //后端的交互地址
        url: "/Book/SelectClassifyOne",
        //如果后端成功返回?cái)?shù)據(jù)則執(zhí)行匿名函數(shù)function,下面的參數(shù)item就是后端返回來的對象數(shù)據(jù)
        success: function (item) {
        //先分析這個(gè)對象數(shù)據(jù)是否非空
            if (item != null && item.length > 0) {
               //定義兩個(gè)變量用于循環(huán)及html代碼拼接
                var num = item.length;
                var html = "<option value=-1 >全部</option>";
               //循環(huán)拼接代碼
                for (var i = 0; i < num; i++) {
                        html += "<option value='" + item[i].ID + "' >" + item[i].Title + "</option>";
                }
               //調(diào)用其他函數(shù)
                $("#inputClassificationFirst").html(html);
                selectClassifySecond();
            }
            
        }
    });
}

我們看到，上面的代碼是用于一個(gè)二級聯(lián)動下拉菜單的內(nèi)容加載。頁面加載的時(shí)候，js調(diào)用這個(gè)selectClassify() 函數(shù)，而這個(gè)函數(shù)里面就用到了ajax方法。

代碼里面的type就是采用的是post方式還是get方式和后端交互。

代碼里面的url就是后端的地址，ajax通過這個(gè)地址與后端進(jìn)行交互。

代碼里面的success內(nèi)容的意思是，如果ajax與后端連接成功后的操作，這是連接成功后就執(zhí)行一個(gè)函數(shù)，這個(gè)函數(shù)是匿名的，函數(shù)里面的參數(shù)item就是

ajax連接成功后后端穿回來的對象數(shù)據(jù)。然后ajax對這個(gè)后端數(shù)據(jù)進(jìn)行非空對象的判斷。

如果對象非空，則使用for循環(huán)對這個(gè)對象數(shù)據(jù)進(jìn)行前端html代碼拼接操作。

代碼拼接完后再進(jìn)行其他函數(shù)的調(diào)用。

2.3常用參數(shù)

1.url
要求為String類型的參數(shù)，（默認(rèn)為當(dāng)前頁地址）發(fā)送請求的地址。

2.type
要求為String類型的參數(shù)，請求方式（post或get）默認(rèn)為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。

3.timeout
要求為Number類型的參數(shù)，設(shè)置請求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋$.ajaxSetup()方法的全局設(shè)置。

4.async
要求為Boolean類型的參數(shù)，默認(rèn)設(shè)置為true，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項(xiàng)設(shè)置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執(zhí)行。

5.cache
要求為Boolean類型的參數(shù)，默認(rèn)為true（當(dāng)dataType為script時(shí)，默認(rèn)為false），設(shè)置為false將不會從瀏覽器緩存中加載請求信息。

6.data
要求為Object或String類型的參數(shù)，發(fā)送到服務(wù)器的數(shù)據(jù)。如果已經(jīng)不是字符串，將自動轉(zhuǎn)換為字符串格式。get請求中將附加在url后。防止這種自動轉(zhuǎn)換，可以查看　　processData選項(xiàng)。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉(zhuǎn)換為&foo1=bar1&foo2=bar2。如果是數(shù)組，JQuery將自動為不同值對應(yīng)同一個(gè)名稱。例如{foo:["bar1","bar2"]}轉(zhuǎn)換為&foo=bar1&foo=bar2。

7.dataType
要求為String類型的參數(shù)，預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，JQuery將自動根據(jù)http包mime信息返回responseXML或responseText，并作為回調(diào)函數(shù)參數(shù)傳遞。可用的類型如下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標(biāo)簽會在插入DOM時(shí)執(zhí)行。
script：返回純文本JavaScript代碼。不會自動緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠(yuǎn)程請求時(shí)（不在同一個(gè)域下），所有post請求都將轉(zhuǎn)為get請求。
json：返回JSON數(shù)據(jù)。
jsonp：JSONP格式。使用SONP形式調(diào)用函數(shù)時(shí)，例如myurl?callback=?，JQuery將自動替換后一個(gè)“?”為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
text：返回純文本字符串。

8.beforeSend
要求為Function類型的參數(shù)，發(fā)送請求前可以修改XMLHttpRequest對象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數(shù)。

function(XMLHttpRequest){
this; //調(diào)用本次ajax請求時(shí)傳遞的options參數(shù)
}
9.complete
要求為Function類型的參數(shù)，請求完成后調(diào)用的回調(diào)函數(shù)（請求成功或失敗時(shí)均調(diào)用）。參數(shù)：XMLHttpRequest對象和一個(gè)描述成功請求類型的字符串。

function(XMLHttpRequest, textStatus){
this; //調(diào)用本次ajax請求時(shí)傳遞的options參數(shù)
}
10.success
要求為Function類型的參數(shù)，請求成功后調(diào)用的回調(diào)函數(shù)，有兩個(gè)參數(shù)。
(1)由服務(wù)器返回，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。
(2)描述狀態(tài)的字符串。

function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //調(diào)用本次ajax請求時(shí)傳遞的options參數(shù)
}
11.error
要求為Function類型的參數(shù)，請求失敗時(shí)被調(diào)用的函數(shù)。該函數(shù)有3個(gè)參數(shù)，即XMLHttpRequest對象、錯(cuò)誤信息、捕獲的錯(cuò)誤對象(可選)。ajax事件函數(shù)如下：

function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個(gè)包含信息
this; //調(diào)用本次ajax請求時(shí)傳遞的options參數(shù)
}
12.contentType
要求為String類型的參數(shù)，當(dāng)發(fā)送信息至服務(wù)器時(shí)，內(nèi)容編碼類型默認(rèn)為"application/x-www-form-urlencoded"。該默認(rèn)值適合大多數(shù)應(yīng)用場合。

13.dataFilter
要求為Function類型的參數(shù)，給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個(gè)參數(shù)。data是Ajax返回的原始數(shù)據(jù)，type是調(diào)用jQuery.ajax時(shí)提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。

function(data, type){
//返回處理后的數(shù)據(jù)
return data;
}
14.dataFilter
要求為Function類型的參數(shù)，給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個(gè)參數(shù)。data是Ajax返回的原始數(shù)據(jù)，type是調(diào)用jQuery.ajax時(shí)提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。
function(data, type){
//返回處理后的數(shù)據(jù)
return data;
}

15.global
要求為Boolean類型的參數(shù)，默認(rèn)為true。表示是否觸發(fā)全局ajax事件。設(shè)置為false將不會觸發(fā)全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

16.ifModified
要求為Boolean類型的參數(shù)，默認(rèn)為false。僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。服務(wù)器數(shù)據(jù)改變判斷的依據(jù)是Last-Modified頭信息。默認(rèn)值是false，即忽略頭信息。

17.jsonp
要求為String類型的參數(shù)，在一個(gè)jsonp請求中重寫回調(diào)函數(shù)的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數(shù)里的"callback"部分，例如{jsonp:'onJsonPLoad'}會導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。

18.username
要求為String類型的參數(shù)，用于響應(yīng)HTTP訪問認(rèn)證請求的用戶名。

19.password
要求為String類型的參數(shù)，用于響應(yīng)HTTP訪問認(rèn)證請求的密碼。

20.processData
要求為Boolean類型的參數(shù)，默認(rèn)為true。默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象（從技術(shù)角度來講并非字符串）以配合默認(rèn)內(nèi)容類型"application/x-www-form-urlencoded"。如果要發(fā)送DOM樹信息或者其他不希望轉(zhuǎn)換的信息，請?jiān)O(shè)置為false。

21.scriptCharset
要求為String類型的參數(shù)，只有當(dāng)請求時(shí)dataType為"jsonp"或者"script"，并且type是GET時(shí)才會用于強(qiáng)制修改字符集(charset)。通常在本地和遠(yuǎn)程的內(nèi)容編碼不同時(shí)使用。

案例代碼：

//作者：劉日輝
//時(shí)間：2017.6.2
$(function(){
    $('#send').click(function(){
         //ajax代碼
         $.ajax({
             //與后端的交互類型
             type: "GET",
             //與后端的交互地址
             url: "test/json",
             //本頁面要傳給后端的數(shù)據(jù)，需要用逗號隔開，下面就要傳兩個(gè)數(shù)據(jù)給后端，分別是username和content
             //$("#username").val()也是jquery的用法，就是獲取html的ID為username的控件值，content一樣
             data: {username:$("#username").val(), content:$("#content").val()},
             //交互的數(shù)據(jù)類型是json格式
             dataType: "json",
             //如果交互成功，則后端會返回對象數(shù)據(jù)，這個(gè)對象數(shù)據(jù)在前端就是存儲在data這個(gè)變量里面
             //當(dāng)然，這個(gè)變量是隨便寫，見名知意就可以了
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有內(nèi)容
                         var html = ''; //創(chuàng)建一個(gè)變量
                          //下面用jquery的each遍歷對象的方式，其實(shí)這個(gè)和for循環(huán)是一樣的，只不過更好用而已
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h7>' + comment['username']
                                         + ':</h7><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

$號是jQuery“類”的一個(gè)別稱，$()構(gòu)造了一個(gè)jQuery對象。
3、代碼修改

我們原有的代碼如下：