Question posted in
You can find the official documentation here.

Issues with jquery post method – Jquery ajax

I’m trying to make a simple hello world app to test connecting front end and back end. The back end is a simple flask app.

This is the JS that executes on button click:

function mouseAction() {
    let helloWorldButton = document.getElementById('btn')
    helloWorldButton.addEventListener("click", function(){
        //post request goes here
        console.log("mouse clicked!")
        $.post({
            url: "http://localhost:5000/hello_world",
            data: {},
            success: function(data){
                formatReturnedData(data)
            },
            dataType: 'string'
        })
        console.log(data)
        console.log('hi bruh')
    })
}

I know the request is received by the server because my daemon logs it:

network log

But the ‘hi bruh’ or the ‘data’ never get printed to console, what am I doing wrong? Any help is appreciated.

Tags:

3

Answers


  1. 0

    Data only exists inside the success function

    function mouseAction() {
    let helloWorldButton = document.getElementById('btn')
    helloWorldButton.addEventListener("click", function(){
        //post request goes here
        console.log("mouse clicked!")
        $.post({
            url: "http://localhost:5000/hello_world",
            data: {},
            success: function(data){
                formatReturnedData(data)
                console.log(data)
                console.log('hi bruh')
            },
            dataType: 'string'
        })
    })
}
    Login or Signup to reply.
  2. 0

    By default jquery ajax request works asynchronously. In that case as you putted your console.log after the server request console.log is executing before server response. If you put console.log inside success call back function the problem will resolve. For example

    function mouseAction() {
    let helloWorldButton = document.getElementById('btn')
    helloWorldButton.addEventListener("click", function(){
        //post request goes here
        console.log("mouse clicked!")
        $.post({
            url: "http://localhost:5000/hello_world",
            data: {},
            success: function(data){
                formatReturnedData(data)
                console.log(data)
                console.log('hi bruh')
            },
            dataType: 'string'
        })
    })
}
    Login or Signup to reply.
  3. 0

    Your request is not formed properly. Your console.logs should be inside of your success callback function. And 'string' is not a valid dataType value.

    Try this instead:

    $.post({
  url: 'http://localhost:5000/hello_world',
  data: {},
  success: function(data) {
    formatReturnedData(data);
    console.log(data);
    console.log('hi bruh');
  },
  dataType: 'json'
});

    For more details see the docs https://api.jquery.com/jquery.post/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search