После запроса POST не успевайте вернуться назад (javascript)

Моя проблема заключается в том, что страница, которая запросила почтовый запрос, исчезла, а затем просто показывает мне строку данных JSON, которая поступает с сервера. Пожалуйста, дайте мне знать, как я могу получить данные ответа без перенаправления (?) Страницы.После запроса POST не успевайте вернуться назад (javascript)

POST Client 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>

POST Ответ сервера

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

результат
{ "сообщение": "Успех"}

источник

2017-02-03 Jincheol Kwon

Можете ли вы поместить html в вопрос? Я думаю, что у вас есть проблема, связанная с поведением элементов html, которые вы используете – rsabir

Вы отправляете форму? – Teemu

Если вы хотите обрабатывать POST с помощью запроса Ajax, вы не должны использовать публикацию HTML.

Изменить HTML следующим образом:

<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>

Так удалить метод POST на ваш теге формы и удалить тип «Submit» на кнопку поле. Я добавил type = "button", но вы также можете использовать type = "text", если ваш css обрабатывает рендеринг.

источник

2017-02-03 08:45:32 mvermand

Для того, чтобы предыдущая перенаправления, вы должны использовать функцию preventDefault().

<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>

источник

2017-02-03 08:40:00

Благодарим вас за помощь, я добавил функцию preventDefault(), как вы сказали. Но он все еще не работает. –

Есть ли у вас какие-либо ошибки или страница по-прежнему перенаправляется? –

Нет, просто никаких изменений не было. –

После запроса POST не успевайте вернуться назад (javascript)

ответ

Смежные вопросы