CODEWITHSUNDEEP
javascriptjqueryajaxnode.jsexpress
Mallika
Mallika

Reputation: 55

Error with AJAX request in javascript and express

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.

Upvotes: 0

Views: 92

Answers (3)

Mallika
Mallika

Reputation: 55

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.

Upvotes: 1

surekha shelake
surekha shelake

Reputation: 246

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.

Upvotes: 0

Nagesh Sanika
Nagesh Sanika

Reputation: 1100

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>

Upvotes: 2

Related Questions