Formular senden von jQuery gibt 'null' Daten

Question

Ich habe versucht, ein Formular mit jQuery zu senden, scheint alles zu funktionieren, außer den Teil, den es 'Null' auf alles zurückgibt.

Meine jQuery/Javascript-Code:

$(document).ready(function() { 
     $('#loginForm').on('submit', function(e) { 
      e.preventDefault(); 

      var $form = $(this); 

      var $url = $form.attr('action'); 
      var $username = $form.find("input[name=username]"); 
      var $password = $form.find("input[name=password]"); 

      if($username.val().length > 0 && $password.val().length > 0) { 
       $.ajax({ 
        type: 'post', 
        url: $url, 
        data: { 
         'username': $username.val(), 
         'password': $password.val() 
        }, 
        success: function(data) { 
         alertify.success("Username: " + data.username + "\n Password: " + data.password); 
        } 
       }); 
      } else { 
       alertify.error("Username and/or password is not provided!"); 
      } 
     }) 
    }) 

Das Ergebnis:

Answer 1

Da Sie JQuery verwenden, haben einen Blick auf .serializeArray(). Dies kann verwendet werden, um die Formulardaten zu erhalten. Beachten Sie, dass nur Eingabewerte mit einem HTML-Attribut name serialisiert werden.

prüfen Sie die Dokumentationen here

resultierende js

var $form = $(this); 
var formDataArray = $form.serializeArray(); 

Stellen Sie sicher, dass Ihre Schaltfläche hat type="submit" HTML-Attribut auch.

Ich hoffe, das hilft,

Rhys

Answer 2

In Antwort auf die Anfrage von @HitmanshuTanwar und @Eihwaz,

Dies ist mein (bezogen) HTML-Code:

<form class="navbar-form navbar-right" role="form" id="loginForm"> 
       <div class="form-group"> 
        <input type="text" class="form-control" name="username" id="username" placeholder="Username"> 
       </div> 

       <div class="form-group"> 
        <input type="password" class="form-control" name="password" id="password" placeholder="Password"> 
       </div> 

       <button type="submit" class="btn btn-primary">Sign In</button> 
      </form> 

Mein (verwandter) PHP-Code:

<?php 
/** 
* Copyright (c) 2016, Experminator (Ronald). 
*/ 

    if(isset($_POST['username']) && isset($_POST['password'])) { 
     $username = $_POST['username']; 
     $password = $_POST['password']; 

     echo($username); 
     echo($password); 
    } 

    die("Invalid."); 
?> 

My (bezogen) JavaScript/jQuery-Code:

$(document).ready(function() { 
     $('#loginForm').on('submit', function(e) { 
      e.preventDefault(); 

      var $form = $(this); 

      var $username = $form.find('input[name=username]'); 
      var $password = $form.find('input[name=password]'); 

      if($username.val().length > 0 && $password.val().length > 0) { 
       $.ajax({ 
        type: 'post', 
        url: 'login.php', 
        data: { username: $username.val(), password: $password.val() }, 
        success: function(data) { 
         alertify.success("Username: " + data.username + " <> Password: " + data.password); 
        } 
       }); 
      } else { 
       alertify.error("Username and/or password is not provided!"); 
      } 
     }) 
    }) 

Das Ergebnis der 'Console':

Und das Ergebnis der 'Networking':