Nach POST-Anfrage, nicht in Erfolg zurückrufen (JavaScript)

Mein Problem ist, dass die Seite, die eine Post-Anfrage angefordert wurde, ist weg, und dann zeigt mir nur eine JSON-Daten-String, die vom Server kommen. Bitte lassen Sie mich wissen, wie bekomme ich die Antwortdaten ohne Umleitung (?) Seite.Nach POST-Anfrage, nicht in Erfolg zurückrufen (JavaScript)

Client-POST Anfrage

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

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

Ergebnis
{ "message": "Erfolg"}

Quelle

2017-02-03 Jincheol Kwon

Kannst du den HTML in die Frage stellen? Ich denke, Sie haben ein Problem im Zusammenhang mit dem Verhalten von HTML-Elementen, die Sie verwenden – rsabir

Sie senden ein Formular? – Teemu

Wenn Sie den POST mit einer Ajax-Anfrage behandeln möchten, sollten Sie keine HTML-Postings verwenden.

Ihre HTML Ändern Sie wie folgt vor: Tag

<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 entfernen Sie die POST-Methode auf dem Formular und entfernen Sie das Feld ‚Senden‘ Typ auf den Button aus. Ich habe type = "button" hinzugefügt, aber Sie können auch type = "text" verwenden, wenn Ihr CSS das Rendering behandelt.

Quelle

2017-02-03 08:45:32 mvermand

Um zu vorh Umleiten, sollten Sie die Funktion preventDefault() verwenden.

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

Quelle

2017-02-03 08:40:00

Vielen Dank für Ihre Hilfe, ich habe preventDefault() -Funktion hinzugefügt, wie Sie gesagt haben. Aber es funktioniert immer noch nicht. –

Haben Sie einen Fehler oder leitet die Seite noch weiter? –

Nein, nur gab es keine Veränderung. –

Nach POST-Anfrage, nicht in Erfolg zurückrufen (JavaScript)

Antwort

Verwandte Themen