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

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

1、什么是jquery?

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

2、什么是ajax()

2.1簡介

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

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

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

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

2.2代碼例子

下面是一個ajax方法的代碼片段：

//獲取一級分類
//作者：劉日輝
//時間：2017.8.3
function selectClassify() {
    $.ajax({
        //后端的交互方式
        type: "POST",
        //后端的交互地址
        url: "/Book/SelectClassifyOne",
        //如果后端成功返回數(shù)據(jù)則執(zhí)行匿名函數(shù)function,下面的參數(shù)item就是后端返回來的對象數(shù)據(jù)
        success: function (item) {
        //先分析這個對象數(shù)據(jù)是否非空
            if (item != null && item.length > 0) {
               //定義兩個變量用于循環(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();
            }
            
        }
    });
}

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

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

代碼里面的url就是后端的地址，ajax通過這個地址與后端進行交互。

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

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

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

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

2.3常用參數(shù)

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

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

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

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

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

6.data
要求為Object或String類型的參數(shù)，發(fā)送到服務(wù)器的數(shù)據(jù)。如果已經(jīng)不是字符串，將自動轉(zhuǎn)換為字符串格式。get請求中將附加在url后。防止這種自動轉(zhuǎn)換，可以查看　　processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉(zhuǎn)換為&foo1=bar1&foo2=bar2。如果是數(shù)組，JQuery將自動為不同值對應(yīng)同一個名稱。例如{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ù)傳遞?？捎玫念愋腿缦拢?br/> xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標(biāo)簽會在插入DOM時執(zhí)行。
script：返回純文本JavaScript代碼。不會自動緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠程請求時（不在同一個域下），所有post請求都將轉(zhuǎn)為get請求。
json：返回JSON數(shù)據(jù)。
jsonp：JSONP格式。使用SONP形式調(diào)用函數(shù)時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數(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請求時傳遞的options參數(shù)
            }
9.complete
要求為Function類型的參數(shù)，請求完成后調(diào)用的回調(diào)函數(shù)（請求成功或失敗時均調(diào)用）。參數(shù)：XMLHttpRequest對象和一個描述成功請求類型的字符串。

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

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

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

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

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

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

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

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

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

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

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

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

案例代碼：

//作者：劉日輝
//時間：2017.6.2
$(function(){
    $('#send').click(function(){
         //ajax代碼
         $.ajax({
             //與后端的交互類型
             type: "GET",
             //與后端的交互地址
             url: "test/json",
             //本頁面要傳給后端的數(shù)據(jù)，需要用逗號隔開，下面就要傳兩個數(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ù)，這個對象數(shù)據(jù)在前端就是存儲在data這個變量里面
             //當(dāng)然，這個變量是隨便寫，見名知意就可以了
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有內(nèi)容
                         var html = ''; //創(chuàng)建一個變量
                          //下面用jquery的each遍歷對象的方式，其實這個和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òu)造了一個jQuery對象。
3、代碼修改

我們原有的代碼如下：

上一講并沒有用到j(luò)query文件，這次是需要的，因為我們這次需要用到后端的代碼，詳情見《 快速用C#語言搭建一個MVC表單系統(tǒng) 》

上次的index代碼詳情見《使用Echarts實現(xiàn)數(shù)據(jù)的可視化》

代碼修改：

首先看下mvc項目里面有沒有echarts.js和jquery.js文檔，沒有的話要把這兩個文檔添加進去。我們打開項目文件如下所示：

上面Scripts文件夾是mvc專門存放js文檔的地方，我們看到?jīng)]有echarts相關(guān)文件，但是有jquery文件，所以我們只需要放echarts文件進去即可。

選中scripts文件夾，右擊在文件資源管理器中打開，

然后回到vs開發(fā)環(huán)境中刷新一下：再顯示“所有文件”

選中剛才導(dǎo)入的js文件，右擊“包括到項目中”：

然后，在Controllers文件夾里面新建一個方法，這個方法用于返回一些對象數(shù)據(jù)。至于什么對象，后續(xù)是根據(jù)我們自己的項目來定的，我們現(xiàn)在做演示就簡單根據(jù)上一講的代碼來生產(chǎn)一個臨時對象，上一講代碼如下：

那么我們在服務(wù)器端生成一個臨時的對象，對象包括：類別，如： ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] ，還有銷售數(shù)量，如： [5, 20, 36, 10, 10, 20]

后端代碼如下：

由于我們要新建一個衣服的對象，所以我們在models文件夾中新建一個clothes類，用這個模擬模擬衣服對象，這樣就不用回到數(shù)據(jù)庫里面獲取數(shù)據(jù)了。

然后我們在HomeController中創(chuàng)建一個返回Json的方法：

前端代碼如下：

效果如下：

到此，關(guān)于“怎么使用Echarts實現(xiàn)前端ajax動態(tài)數(shù)據(jù)后端C#”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>