-1

I have been using Ajax with jQuery to save pictures from canvas as follow:

HTML

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="javascript/take_pic.js"></script>

take_pic.js

$.ajax({
      method: "POST",
      url: "pictureController.php",
      data: { canvasData }
       }).done(function(data){
          console.log("Success");
       }).fail(function(html){
          console.log("Fail");
});

pictureController.php

if(isset($_POST['canvasData']))
{
    $data = $_POST['canvasData'];
    saveData($data);
}

function saveData($data)
{
    //...
}

This was working perfectly yesterday but stopped working today.. It seems that pictureController.php is not called anymore! What is strange is that console.log logs success..

I would like to stop using jQuery and use Ajax only, how can I update my JavaScript to do so?

Thank you!

Wizzardzz
  • 781
  • 1
  • 9
  • 32
  • Any error in console? – BadPiggie May 06 '19 at 11:21
  • Ajax is a part of jquery!!. No JQuery, no AJAX – Krishna Prashatt May 06 '19 at 11:21
  • @BanujanBalendrakumar not a single one :/ – Wizzardzz May 06 '19 at 11:21
  • @KrishnaPrashatt I don't think that's true – Wizzardzz May 06 '19 at 11:22
  • 1
    @Wizzardzz: Have you tried anything at all? When you look up examples of using AJAX in JavaScript, what do you find? Where do you get stuck? We can help with problems you encounter, but Stack Overflow is not a code conversion service. – David May 06 '19 at 11:22
  • @KrishnaPrashatt: That's not true at all. Not even close. – David May 06 '19 at 11:22
  • `$.ajax` .. here that dollar sign indicates `jQuery` but you can use `xmlhttprequest` in javascript without using jquery... But you said it worked yesterday, So I think the ajax not the issue – BadPiggie May 06 '19 at 11:23
  • [How can I debug my JavaScript code?](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) – Andreas May 06 '19 at 11:23
  • @David try using ajax without including jquery. If you do a HTTP request without ajax it is called XMLHttpRequest and not ajax. – Krishna Prashatt May 06 '19 at 11:25
  • 1
    @KrishnaPrashatt: The `$.ajax()` *function* is specific to jQuery, the *technology* commonly known as "AJAX" (notice the difference in how the two are written and used) is general to all of JavaScript. Please keep your terminology straight, this will help you better understand why you are incorrect. – David May 06 '19 at 11:27
  • `data:{canvasData:canvasData}` try this – Danyal Sandeelo May 06 '19 at 11:42
  • @David Well I would like to fix my code before converting it to Ajax without jQuery. I'd liek to understand what's wrong and get people's opinion on what to do here... – Wizzardzz May 06 '19 at 11:42
  • @DanyalSandeelo Still not calling the .php :/ – Wizzardzz May 06 '19 at 11:43
  • 1
    how can you say, not calling? how did you verify that? did you echo anything above the function? do you check it via developers tools etc? – Danyal Sandeelo May 06 '19 at 11:44
  • @DanyalSandeelo I have a header(Location) in my php file to know if it's called or not – Wizzardzz May 06 '19 at 11:45
  • 1
    @Wizzardzz: What does a location header have to do with it? It sounds like it's time to use your browser's debugging tools. You say you've already checked for errors on the browser console. How about the network tab of the debugging tools? Is the AJAX request made? What is the server's response? What are the details of that request/response? Does it have the headers you expect? The data you expect? You've told us that the `success` callback is being invoked, so what is the actual indication of anything not working? – David May 06 '19 at 11:58
  • @David Thank you very much David! You made me discover the network tab which seems to be very powerful. It seems that the .php file is indeed called and that the ajax method is correct, I can't understand why nothing is happening tho. A picture should be saved from the canvas to a folder. I guess I need to focus on my debugging skills – Wizzardzz May 06 '19 at 12:02

1 Answers1

1

Hey you can do this with : 

const req = new XMLHttpRequest();

req.onreadystatechange = function(event) {
    // XMLHttpRequest.DONE === 4
    if (this.readyState === XMLHttpRequest.DONE) {
        if (this.status === 200) {
            console.log("Réponse reçue: %s", this.responseText);//ur response is here 
        } else {
            console.log("Status de la réponse: %d (%s)", this.status, this.statusText);
        }
    }
};

req.open('POST', 'http://www.exemple.com/pictureController.php', true);//url to get and method here
req.send({ canvasData });//data to send here

and for more documentation read this

Conan
  • 319
  • 2
  • 9