Ajax登录表单提交不起作用

Question

This form allow to log in for wrong details.But validations work. Can you please tell me where is the issue? Is this format correct for send multiple form data? login_process.php

<?php
session_start();
require_once("connnection.php"); 

$con=mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();

}

  $email = mysqli_real_escape_string($con, $_POST['email1']);
 $password = mysqli_real_escape_string($con, $_POST['password1']);
  $query = "SELECT * FROM user WHERE email='$email' AND passwordR='$password' AND status='1' ";
  $result = mysqli_query($con,$query)or die(mysqli_error($con));
  $num_row = mysqli_num_rows($result);
  $row=mysqli_fetch_array($result);
  if( $num_row ==1 )
         {
   $_SESSION['user_name']=$email;
   echo "Form Submitted Succesfully";


  }


 mysqli_close($con);  ?>

Here is my Ajax code. Im not sure whether data is sent correctly to the php file

 $(document).ready(function(){
$("#login").click(function(){

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

// Returns successful data submission message when the entered INFORMATION is stored in database.
var dataString = '&email1='+ email + '&password1='+ password ;
if(email==''||password=='')
{
$(".error-messages").text("You must fill each field").show();
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "login_process.php",
data: dataString,
cache: false,
success: function(result){
location.href="member_area.php";
}
});
}
return false;
});
});                             

Answer 1

Here is the first portion. This will validate your form and submit to the <div id="response"></div>" . You also have to change your form tag to <form method="post" name="login_form" id="login_form"> (add the id not just name ). Also I have used jQuery form validation to validate your form:

<!-- This line needs to include the id, not just name attribute -->
<form method="post" name="login_form" id="login_form">
    <input type="text" placeholder="Username/email" name="email" id="username">
    <p style="color:red;" id="errors1"></p>
    <input type="password" placeholder="password" name="password" id="password">
    <p style="color:red;" id="errors2"></p>
    <a href="reset_password.php" class="forgot">forgot password?</a>
    <input type="submit" id="login" name="submit" value="Sign In" />
</form>

<!-- This is where instructions load into from the ajax. it is required for this to work -->
<div id="response"></div>

<!-- required for jQuery, you likely have these already -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!-- required for jQuery form validation to work -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script>
    $(document).ready(function(){
            // Validate the form->see rules below
            $("#login_form").validate({
                // On success of the form validation
                // submit AJAX
                submitHandler: function() {
                    // AJAX Code To Submit Form.
                    $.ajax({
                            type: "POST",
                            url: "login_process.php",
                            data: $("#login_form").serialize(),
                            cache: false,
                            success: function(data){
                                    $("#response").html(data);
                                }
                        });
                    return false;
                },
            // See jQuery validate() for more options for rules
            rules: {
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true//,
                    //minlength: 8
                }
            },
            messages: {
                email: {
                    required: "Username Required",
                    email: "Invalid Email"
                },
                password: {
                    required: "Password Required",
                    minlength: "8 Character Minimum"
                }
            }
        });
    });                 
</script>

login_process.php

<?php
session_start();
require_once("connnection.php"); 

$con    =   mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();

}

    $email      =   mysqli_real_escape_string($con, $_POST['email']);
    $password   =   mysqli_real_escape_string($con, $_POST['password']);
    $query      =   "SELECT * FROM user WHERE email='$email' AND passwordR='$password' AND status='1' ";
    $result     =   mysqli_query($con,$query)or die(mysqli_error($con));
    $num_row    =   mysqli_num_rows($result);
    $row        =   mysqli_fetch_array($result);

    if( $num_row ==1 ) {
            $_SESSION['user_name']  =   $email; ?>
    <script>
    // This would redirect on load
    $(document).ready(function(){ 
        window.location =   'member_area.php';
    });
    </script>
            <?php
        }
    else { ?>
    <h1>Wrong Username/Password</h1>
    <?php }


 mysqli_close($con);  ?>

EDIT: This line had html spelled wrong. Should be $("#response").html(data); not $("#response").hmtl(data);