CODEWITHSUNDEEP
javascriptajaxpostrequestresponse
Jincheol Kwon
Jincheol Kwon

Reputation: 3

After POST request, don't get into success call back (javascript)

My problem is that the page which requested a post request is gone, and then just shows me a JSON data string which come from server. Please let me know how can I just get the response data without redirecting(?) page.

Client POST Request

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Login Form</title>

  <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="../../semantic/dist/semantic.min.css">
  <link rel="stylesheet" type="text/css" href="../../semantic/dist/login.css">
  <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
  <script src="semantic/dist/semantic.min.js"></script>


  <script type="text/javascript">
      $(document).ready(function() {
        $("#submit").click(function() {
            var form_data = {
                user_id: $("#user_id").val(),
                user_pw: $("#user_pw").val(),
                is_ajax: 1
            };
            $.ajax({
                type: "POST",
                url: '/',
                data: JSON.stringify(form_data),
                contentType: "application/json",
                dataType: "json",
                success: function(response) {
                    console.log('test');
                },
                error : function(response){
                    console.log('test');
                }
            });
        });
      });
      </script>
</head>

<body>
  <div class="ui one column center aligned grid">
<div class="column six wide form-holder">
  <h2 class="center aligned header form-head">Sign in</h2>
  <div class="ui form">
  <form class="form-signin" method="post">
    <div class="field">
      <input type="text" name = "user_id" placeholder="Email">
    </div>
    <div class="field">
      <input type="password" name = "user_pw" placeholder="password">
    </div>
    <div class="field">
      <input type="submit" value="sign in" class="ui button large fluid green">
    </div>
    <div class="field">
      <CENTER><h5><a href = "/register">Register</a></h5></CENTER>
    </div>
    </form>
  </div>
</div>

Server POST Response 

res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(JSON.stringify({message : "success"}));

result
{"message":"success"}

Upvotes: 0

Views: 88

Answers (2)

mvermand
mvermand

Reputation: 6117

If you want to handle the POST with an Ajax request, you should not use HTML posting.

Change your HTML as follows:

<form class="form-signin">
    <div class="field">
      <input type="text" name = "user_id" placeholder="Email">
    </div>
    <div class="field">
      <input type="password" name = "user_pw" placeholder="password">
    </div>
    <div class="field">
      <input type="button" value="sign in" class="ui button large fluid green">
    </div>
    <div class="field">
      <CENTER><h5><a href = "/register">Register</a></h5></CENTER>
    </div>
</form>

So remove the POST method on your form tag and remove the 'submit' type on your button field. I added type="button" but you may also use type="text" if your css handles the rendering.

Upvotes: 0

Igor Dolzhenkov
Igor Dolzhenkov

Reputation: 709

In order, to prevent redirecting, you should use preventDefault() function.

 <script type="text/javascript">
      $(document).ready(function() {
        $("#submit").click(function(e) {
            e.preventDefault();
            var form_data = {
                user_id: $("#user_id").val(),
                user_pw: $("#user_pw").val(),
                is_ajax: 1
            };
            $.ajax({
                type: "POST",
                url: '/',
                data: JSON.stringify(form_data),
                contentType: "application/json",
                dataType: "json",
                success: function(response) {
                    console.log(response);   //->it is not working.
                },
                error : function(response){
                    console.log('fail');
                }
            });
        });
      });
      </script>

Upvotes: 2

Related Questions