Skip to content
Advertisement

Convert AJAX Jquery to Vanilla Javascript (POST) with .fetch async

I am trying to change this .ajax call from Jquery to pure Javascript.

And this way I receive the JSON in my PHP: echo '{"enviando":-1,"cat":"<span class=text-primary><strong>' . $exampleresult . '</strong></span>"}';

JQUERY CALL:

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;

And this is my try with Vanilla Javascript:

But I get the error: SyntaxError: Unexpected end of JSON input at envSoli. And the error line: let resultado = await peticion.json();

What is the problem? How can I fix it? I’m just learning about JavaScript requests.

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();

UPDATE

My textarea has 10 lines that with the Jquery code I would send each one to my PHP and then return them to the divs in HTML.

The current code (Vanilla), only makes 1 request and dont send the result to the HTML. (But my PHP validation is correct, the problem is in the JS code).

How i can fix it? I put a image for reference: img

Advertisement

Answer

After many attempts I have succeeded. This is the final result. (Thanks to the user @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();
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement