使用Ajax登录网站

Question

Here is a screenshot of the console.I am a beginner in working with json and Ajax and I am trying to write a login for my website, but I don't know why it is not working.

login-register.js

function loginAjax(){
$.post( "login.js", function( data ) {
        if(data == 1){
            window.location.replace("/sportime.html");            
        } else {
             shakeModal(); 
        }
    });

}

login.js

 $(document).ready(function() 
 {

  $('#login').click(function()
  {
  var username=$("#username").val();
  var password=$("#password").val();
  var dataString = 'username='+username+'&password='+password;
  if($.trim(username).length>0 && $.trim(password).length>0)
  {
  $.ajax({
  type: "POST",
  url: "ajaxLogin.php",
  data: dataString,
  cache: false,
  beforeSend: function(){ $("#login").val('Connecting...');}

  });

  }
  return false;
  });

  });

ajaxLogin.php

<?php
include("conectare.php");
session_start();
if(isset($_POST['username']) && isset($_POST['password']))
{
// username and password sent from Form
$username=mysqli_real_escape_string($mysqli,$_POST['username']); 
//Here converting passsword into MD5 encryption. 
$password=md5(mysqli_real_escape_string($mysqli,$_POST['password'])); 

$result=mysqli_query($mysqli,"SELECT uid FROM users WHERE         username='$username' and password='$password'");
$count=mysqli_num_rows($result);
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
// If result matched $username and $password, table row  must be 1 row
if($count==1)
{
$_SESSION['login_user']=$row['uid']; //Storing user session value.
echo $row['uid'];
}

}
?>

sportime.php

  <?php
  session_start();
  if(!empty($_SESSION['login_user']))
  {
  header('Location: sportime-loggedin.php');
  }
  ?>

and this is the modal for the login from sportime.php

 <div class="modal fade login" id="loginModal">
                <div class="modal-dialog login animated">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Login</h4>
                            <div class="content text-center"><h5>Use your University credentials</h5></div>
                        </div>
                        <div class="modal-body">
                            <div class="box">
                                <div class="content">
                                    <div class="error"></div>
                                    <div class="form loginBox">
                                        <form method="post" action="" onsubmit="loginAjax(); return false;" accept-charset="UTF-8">
                                            <input id="email" class="form-control" type="text" placeholder="University ID" name="id">
                                            <input id="password" class="form-control" type="password" placeholder="Password" name="password">
                                            <input class="btn btn-default btn-login" type="submit" value="Login">
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

Why are you trying to post to a js file?

function loginAjax(){
$.post( "login.js", function( data ) {
        if(data == 1){
            window.location.replace("/sportime.php");            
        } else {
             shakeModal(); 
        }
    });

}

Your loginAjax function should look like this

  function loginAjax() {
    var username = $("#email").val();
    var password = $("#password").val();
    var dataString = 'username=' + username + '&password=' + password;
    if ($.trim(username).length > 0 && $.trim(password).length > 0) {
      $.ajax({
        type: "POST",
        url: "ajaxLogin.php",
        data: dataString,
        cache: false,
        beforeSend: function() {
          $("#login").val('Connecting...');
        }

      }).success(function(data) {
        if (parseInt(data) > 1) {
          window.location.replace("/sportime.html");
        } else {
          shakeModal();
        }
      });
    }
   return false;
  }

EDIT

You have misplaced the ids. Replace

var username = $("#username").val();

with var username = $("#email").val();