Error with AJAX request in javascript and express

Question

I'm a complete beginner to this. I have searched endlessly over the internet but I just cannot figure out the problem. Probably I'm making some basic conceptual mistake, so any help would be appreciated.

I want to take a simple form input using javascript or jquery and an ajax request. Here's the relevant code.

//JavaScript:

function sendMails(){

          console.log("This is executing");

        var data={
            first_name: $("#first_name").val(),
            email: $("#email").val(),
            toArtists: $("#toArtists").val(),
            comments: $("#comments").val(),
            bcc_Emails: $("#bcc_Emails").val()
            };

          $.ajax({ 
           url: "/sendMailsToArtists",
           type: "POST",
           cache: false, 
           async: true,
           data: data,
           //data: $("commentform").serialize(),

           success: function(data){
              alert('Success!')
              console.log("This is executingggggg");
           }
           , 
           error: function(jqXHR, textStatus, err){
               alert('text status '+textStatus+', err '+err)
           }
        });
      //return false;
   }

<form class="form-horizontal" name="commentform" id="commentform">

  //Some fields
  <button type="submit" value="Submit" class="btn btn-custom pull-right" id="send_btn" onclick="sendMails()">Send</button>

</form>

The URL is contained in a file called app.js which I run for the server.

The line "This is executing" gets printed on the console. And then the alert pops up with the message "text status error, err". And then the page navigates to a URL which is something like "http://localhost:3000/contactArtists?first_name=ohohoo&email=mallika13055%4…"

Excuse me if it's something really basic.

EDIT:

Okay so I changed to <button type = "button">.

Here's the server side code:

app.post('/sendMailsToArtists', function (req, res){

  console.log(req.body);
});

The data gets printed on the terminal. Does this mean there's no error? Then why doesn't the success branch of the ajax request get executed?

EDIT 2:

It's resolved. res.send() does the job.

You should use console.log instead of alert to inspect the err object — Stefano Ortisi
– Stefano Ortisi, Commented May 25, 2015 at 10:06
The problem is likely to be serverside. Can we look at that code, or at least what the server is receiving when you POST data? It's hard to know what happens between the POST getting sent out, and the redirect happening... — Sze-Hung Daniel Tsui
– Sze-Hung Daniel Tsui, Commented May 25, 2015 at 10:07
@Sze-HungDanielTsui - posted. now there's no error, but no "success" either. And the page doesn't get redirected. — Mallika
– Mallika, Commented May 25, 2015 at 10:23
try printing jqXHR.status, jqXHR.statusText, and jqXHR.responseXML to console.log. — ShahiM
– ShahiM, Commented May 25, 2015 at 10:34

Nagesh Sanika · Accepted Answer · 2015-05-25 10:06:50Z

2

you are using submit button, which submits form so use type='button' it will work

<button type="button" value="Submit" class="btn btn-custom pull-right" id="send_btn" onclick="sendMails()">Send</button>

answered May 25, 2015 at 10:06

Nagesh Sanika

1,1001 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mallika · Accepted Answer · 2015-06-02 11:35:29Z

1

As said in the edit, adding a res.send() after the console.log(req.body) on the server side does the job. The success branch of the ajax request gets executed.

answered Jun 2, 2015 at 11:35

Mallika

551 gold badge2 silver badges13 bronze badges

Comments

surekha shelake · Accepted Answer · 2015-05-25 10:17:19Z

You have did correct ajax call in jquery. Assuming all value you want to pass to "sendMailsToArtists" method. Suppose you are running your application on http://localhost/youapp/method. This is you server URL. While doing ajax post call, in URL parameter you have set url:"/sendMailsToArtists" so this path is not readable to server. fist of all you have to consider to root path i.e url:"../controllername/methodName"

Here ".." stand root of application. Only this mistake you have did here. Please correct url parameter value according to you current application path.

You want to get correct idea of where you ajax call is going user web developer tool (enter f12 in chrome ) & open network tab. now perform you ajax call you can see to which url your request it going.

function sendMails(){

          console.log("This is executing");
        var data={

        first_name: $("#first_name").val(),
        email: $("#email").val(),
        toArtists: $("#toArtists").val(),
        comments: $("#comments").val(),
        bcc_Emails: $("#bcc_Emails").val()
        };

      $.ajax({ 
       url: "../sendMailsToArtists",
       type: "POST",
       cache: false, 
       async: true,
       data: data,
       //data: $("commentform").serialize(),

       success: function(data){
          alert('Success!')
          console.log("This is executingggggg");
       }
       , 
       error: function(jqXHR, textStatus, err){
           alert('text status '+textStatus+', err '+err)
       }
    });

}

This may helps you.

this is not causing a problem as far as i can see. in my current code, the console.log(req.body) statement is getting executed, which means the URL is fine i guess.

Collectives™ on Stack Overflow

Error with AJAX request in javascript and express

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related