jQueryによるフォーム提出で 'null'データが返される

Question

jQueryを使用してフォームを送信しようとしましたが、すべてが「null」を返す部分以外はすべて動作するようです。

私はjQuery/Javascriptコード：

$(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!"); 
      } 
     }) 
    }) 

結果：

Answer 1

あなたはjQueryのを使用しているので、.serializeArray()を見ています。これを使用してフォームデータを取得できます。 name HTML属性を持つ入力値のみがシリアル化されることを覚えておいてください。 JS

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

を結果としてドキュメントhere

アウト

チェックは、あなたのボタンもtype="submit" HTML属性を持っていることを確認します。 @HitmanshuTanwarと@Eihwazの要求に答えて

私はこれが役に立てば幸い、

リス

Answer 2

、

これは私の（関連）HTMLコードです：

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

My（関連）PHPコード：

<?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."); 
?> 

私の（関連）のjavascript/jqueryのコード：

$(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!"); 
      } 
     }) 
    }) 

'コンソール' の結果：

そして、 'ネットワーキング' の結果：