將 AJAX Jquery 轉換為 Vanilla Javascript (POST) with.fetch async

Question

我正在嘗試將 this.ajax 調用從 Jquery 更改為純 Javascript。

這樣我在我的 PHP 中收到 JSON： echo '{"enviando":-1,"cat":"<span class=text-primary><strong>'. $exampleresult. '</strong></span>"}';

JQUERY 致電：

ajaxCall = $.ajax({
  url: "data.php",
  dataType: "json",
  cache: false,
  type: "POST",
  beforeSend: function (nautia) {
    //IMG NOT RELEVANT
    $("#checkStatus").html("<img src=''/>");
  },
  data: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille]),
  success: function (oreen) {
    switch (oreen.enviando) {
      case -1:
        chenille++;
        $("#div1").append(oreen.cat + "<br />");
        updateProgress(chenille, leray.length);
        tvmit_wrongUp();
        break;

      case 1:
        chenille++;
        $("#div1").append(oreen.dog + "<br />");
        updateProgress(chenille, leray.length);
        tvmit_wrongUp();
        break;

      case 2:
        chenille++;
        $("#div2").append(oreen.sky + "<br />");
        nieva++;
        updateProgress(chenille, leray.length);
        tvmit_dieUp();
        break;

      case 3:
        chenille++;
        $("#div3").append(oreen.water + "<br />");
        tvmit_liveUp();
        updateProgress(chenille, leray.length);
        break;
    }

    OKTY(leray, chenille, aarsh, nieva);
  }
});
return true;

這是我對香草 Javascript 的嘗試：

但我收到錯誤： SyntaxError: Unexpected end of JSON input at envSoli 。 和錯誤行： let resultado = await peticion.json();

問題是什么？ 我該如何解決？ 我剛剛了解 JavaScript 請求。

const envSoli = async () => {
    try {
      let peticion = await fetch("data.php", {
        method: "POST",
        body: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille]),
        headers: { "Content-type": "application/x-www-form-urlencoded" }
      });
      let resultado = await peticion.json();
      function ola (oreen) {
        switch (oreen.enviando) {
          case -1:
              chenille++;
              document.getElementById("div1").append(oreen.cat + "<br />");
              updateProgress(chenille, leray.length);
              tvmit_wrongUp();
              break;
  
          case 1:
              chenille++;
              document.getElementById("div1").append(oreen.dog + "<br />");
              updateProgress(chenille, leray.length);
              tvmit_wrongUp();
              break;
        
          case 2:
                chenille++;
                document.getElementById("div2").append(oreen.sky + "<br />");
                nieva++;
                updateProgress(chenille, leray.length);
                tvmit_dieUp();
                break;
  
          case 3:
              chenille++;
              document.getElementById("div3").append(oreen.water + "<br />");
              tvmit_liveUp();
              updateProgress(chenille, leray.length);
              break;
      }
  
        OKTY(leray, chenille, aarsh, nieva);
      }
      return true;
    } catch (error) {
      console.log(error)
    }
  }
  envSoli();

更新

我的 textarea 有 10 行，使用 Jquery 代碼，我會將每一行發送到我的 PHP，然后將它們返回到 HTML 中的 div。

當前代碼（Vanilla）僅發出 1 個請求並且不將結果發送到 HTML。 （但我的 PHP 驗證是正確的，問題出在 JS 代碼中）。

我該如何解決？ 我放一張圖片供參考：

Answer 1

這有點老派，但它可能有助於發現錯誤是什么。 嘗試像這樣撥打電話：

function check() {

    var request = new XMLHttpRequest();
    var url = "data.php";
    var params = JSON.stringify({
        data: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille])
    });

    request.open('POST', url, true);

    request.setRequestHeader('Content-Type', 'application/json');

    request.onreadystatechange = function() {

    if (request.readyState == 4 && request.status = 200) {
    
        // handle response here...
    }

}

在我的搜索過程中歸功於這些來源：

jquery ajax 到 vanilla javascript（普通javascript）代碼轉換請求

使用 XMLHttpRequest 發送 POST 數據

希望這可以幫助！

Answer 2

您不應該調用JSON.stringify() ，因為原始 jQuery 代碼沒有發送 JSON。 body:參數應與$.ajax中的data:參數相同。

body: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille])

另外，改變：

      headers: { "Content-type": "application/json" }

至：

      headers: { "Content-type": "application/x-www-form-urlencoded" }

內容以 URL 編碼格式發送。 PHP 不會自動解析 JSON。

Answer 3

經過多次嘗試，我成功了。 這是最終的結果。 （感謝用戶@Barmar）：

const envSoli = async () => {
    try {
      let peticion = await fetch("data.php", {
        method: "POST",
        body: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille]),
        headers: { "Content-type": "application/x-www-form-urlencoded" },
        cache: "no-cache
      });
      let oreen = await peticion.json();

        switch (oreen.enviando) {
          case -1:
              chenille++;
              document.getElementById("div1").append(oreen.cat + "<br />");
              updateProgress(chenille, leray.length);
              tvmit_wrongUp();
              break;
  
          case 1:
              chenille++;
              document.getElementById("div1").append(oreen.dog + "<br />");
              updateProgress(chenille, leray.length);
              tvmit_wrongUp();
              break;
        
          case 2:
                chenille++;
                document.getElementById("div2").append(oreen.sky + "<br />");
                nieva++;
                updateProgress(chenille, leray.length);
                tvmit_dieUp();
                break;
  
          case 3:
              chenille++;
              document.getElementById("div3").append(oreen.water + "<br />");
              tvmit_liveUp();
              updateProgress(chenille, leray.length);
              break;
      }
  
        OKTY(leray, chenille, aarsh, nieva);
      return true;
    } catch (error) {
      console.log(error)
    }
  }
  envSoli();