I am designing a web application. It was working all fine before adding ajax. Now i want to add ajax but nothing is happening same first page is loading again and again. Please tell me the reason why ajax is not responding (no error message no new page loading). My code is below. h.php is a simple file saying hello.
first.php:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Online library </title>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<form method="post">
<div class="result"></div>
UserName:<input type="text" name="name" id="username"><br><br>
Password:<input type="password" name="password" id="password"><br><br>
<button id="loginn" type="submit" name="button" <strong>login</strong> </button>
</form>
<script type="text/javascript" src=""jquery-3.2.0.js""></script>
<script type="text/javascript">
$(document).ready(function(){
$("#loginn").submit(function(e){
var username=$("#username").val();
var password=$("#password").val();
var result=$('.result').val();
var dataString = 'username='+username+'&password='+password;
$.ajax({
type: "POST",
url: "log.php",
data: dataString,
success: function(responseText){
if(responseText==0) {
result.html('<span class="error">incorrect username</span>');
}
else if(responseText==1)
{
window.location="h.php";
}
else{
alert('error in query');
}
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
log.php:
<?php
include 'user.php';
$name=$_POST["username"];
$password=$_POST["password"];
$con=new users();
$con->login($name,$password);
?>
user.php:
<?php
class users
{
public function constructs()
{
$con=mysqli_connect("localhost", "root", "") or die (mysqli_error());
mysqli_select_db($con,'online') or die(mysqli_error($con));
return $con;
}
function login($username, $password) {
$con=$this->constructs();
$rs = mysqli_query($con, "SELECT username, password FROM member WHERE username='$username' AND password='$password'");
if(mysqli_num_rows($rs)>0)
{
echo 1;
}
else {
echo 0;
}
}
?>
You're tying your code to the document.ready function from jQuery which runs your code immediately when the document is ready to render, but that's only part of the problem I think. Also try adding some console.log lines in your code in various places to check to make sure document references are working correctly.
Your code that you pasted has some syntax errors in, especially your user.php file (if it's indeed copy/pasted directly). Even though the files may not print any results try loading each one in your browser to see if there are syntax errors.
Your html is formatted wrong in a few places in your first.php. Check the placement of your doctype, add the proper end tags for your <head> section, check your formatting for the form itself (specifically the login button itself)
is this actually part of your code?
<script type="text/javascript" src=""jquery-3.2.0.js""></script>
if so it should be
<script type="text/javascript" src="jquery-3.2.0.js"></script>
let me know if there's anything else
There are alot of bugs in your code not to mention its very unsafe as the comments have stated. Here are a few things you are missing:
users.php" "val() at the end you wont see the results from the query beacuase of that.Providing that the database is setup correctly the rest of the code should work.
Here is the working code:
index.php
$("#loginn").click(function(e){
var username=$("#username").val();
var password=$("#password").val();
var result=$('.result');
var dataString = 'username='+username+'&password='+password;
$.ajax({
type: "POST",
url: "log.php",
data: dataString,
success: function(responseText){
console.log(responseText);
if(responseText==0) {
$(result).html('<span class="error">incorrect username</span>');
}
else if(responseText==1)
{
window.location="h.php";
}
else{
alert('error in query');
}
},
fail: function(err) {
console.log(err);
}
});
e.preventDefault();
});
});
log.php - the same
user.php - missing curly bracket at the end