HTML
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
<link href="css/refreshform.css" rel="stylesheet">
</head>
<body>
<div id="mainform">
<h2>Submit Form Using AJAX and jQuery</h2>
<div id="form">
<h3>Fill Your Information !</h3>
<div>
<label>Email :</label>
<input id="email" type="text">
<label>Password :</label>
<input id="password" type="password">
<input id="submit" type="button" value="Submit">
</div>
</div>
</div>
</body>
</html>
JavaScript
script.js
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();
var dataString = '&email1=' + email + '&password1=' + password;
if(email == '' || password == '' )
{
alert("Por favor preencha todos campos");
}
else
{
$.ajax({
type: "POST",
url: "http://192.168.0.10/apps/ajaxsubmit.php",
data: dataString,
datatype: 'json',
success: function(data){
$('#result').html(data.status +':' + data.message);
$("#result").addClass('msg_notice');
$("#result").fadeIn(1500);
}
});
}
return false;
});
});
PHP
ajaxsubmit.php
<?php
header('Content-Type: application/json');
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("mydba", $connection);
$email2 = $_POST['email1'];
$password2 = $_POST['password1'];
$query = mysql_query("SELECT * FROM form_element WHERE email = '" .mysql_real_escape_string($email2). "' AND password = '" .mysql_real_escape_string($password2). "' ");
$num_row = mysql_num_rows($query);
if($num_row>0)
{
echo json_encode(array('status' => 'success','message'=> 'The group has been removed'));
}else{
echo json_encode(array('status' => 'success','message'=> 'The group has been removed'));
}
mysql_close($connection);
O que está retornando: