$.ajax的基本使用

作為一個前端程式設計師必須要與後端的資料做互動，此時就應用到了 ajax 來獲取資料。

首先引入jquery（這裡引入的線上地址）

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

Demo：

首先在HTML中建立基本元素：

  <div class="first"></div>
  <div class="second"></div>
  <div class="second1"></div>

接著我們獲取一下地址：

  var baseUrl = 'http://81.70.146.54:2222/'; // 此地址為真是地址
  getPageTotalAndDataTotal()
  function getPageTotalAndDataTotal(page) {
    // 獲取頁數與資料總數
    $.ajax({
      url: baseUrl + "news/findStatus",
      type: "post",
      async: false,//此處需要注意的是要想獲取ajax返回的值這個async屬性必須設定成同步的，否則獲取不到返回值
      data: {},  // 需要提交的資料
      dataType: "json", // 資料使用JSON格式進行傳輸
      success: function (data) { // 成功回撥，返回的資料根據結果進行相應的會處理
        console.log(data)
        console.log(data.data)
        var status = data.data;
        // console.log(status)

        if (data.code == '1') {  // 成功獲取到資料拎出去單寫
          init(status)
        }
      }
    });
  }
 

接著我們拎出來單寫：

方法 一：（此時頁面已經展示資料了）

  function init(status) { // status是必須要傳的值
     $('.first').empty();
     $('.first').text(status[0].title)
     $('.second').text(status[1].title)
  }

方法二：

  function init(status) {  // status引數必須傳
    var firstData = status[0].title;  // 定義相應的引數
    var secondData = status[1].content;
    firstText(firstData)   // 在相應的方法裡面進行相應引數的傳遞
    secondText(secondData)
  }

  function firstText(firstData) {
    $('.first').text(firstData)

  }
 

此時資料已經展示在頁面了。

大概就這樣了！（有好的建議可以進行互動與交流）