1 分で axios (ajax) の使用方法を学び、落とし穴を回避する

1.axiosの役割

1 はじめに

  Axios は実際には ajax を簡略化した書き方であり、その本質は ajax と同じです。そして、ajax (Asynchronous JavaScript And XML) は実際には非同期の JavaScript と XML です。

2.機能

  簡単に言うと「htmlのaxios経由でデータベース(バックエンド)に接続する」です。
  最大の特徴は、ジャンプせずにバックエンドにアクセスできることです。

2.axiosの使い方

1. 直接書き込み方式

  まず、axios を使用する場合は、次のコードに示すように、最初に axios をインポートする必要があります。

   <script src="axios-0.18.0.js"></script>

  *サポートされているファイル Baidu Netdisk:
    リンク: https://pan.baidu.com/s/1mS6S7vr0T9g0VjWrEXkhFg?pwd=njjx
    抽出コード: njjx
https://pan.baidu.com/s/1mS6S7vr0T9g0VjWrEXkhFg?pwd=njjx
バックエンド コードの中心となるのはリクエストとレスポンスで、リクエストには get リクエスト メソッドとポスト リクエスト メソッドがあるため、axios がバックエンド サーバーにアクセスするときは、次の 2 つの状況に分けられます
   。

  axios({
    method:"get",
      /!*此处记得是服务器地址*!/
    url:"http://localhost:8088/_06_Ajax_war_exploded/AxiosServlet?username=zhangkun"
  }).then(function (resp){  // resp可以获取到响应的值
      alert(resp.data);
  })

   役職

    axios({
        method:"get",
        url:"http://localhost:8088/_06_Ajax_war_exploded/AxiosServlet?",
        data:"username=zhangkun"  /*与get不同之处：参数通过data传*/
    }).then(function (resp){
        alert(resp.data);
    })

2. バリエーション

  得る：

axios.get("http://localhost:8088/_06_Ajax_war_exploded/AxiosServlet?username=zhangkun")
        .then(function (){
            alert(resp.data);
        })

  役職：

    axios.post("http://localhost:8088/_06_Ajax_war_exploded/AxiosServlet","username=zhangkun")
        .then(function (){
            alert(resp.data);  
        })