I am trying to build a front end HTML page that takes in a username and password and then uses a javascript function to show response depending on the answer received from the server. I am a super noob when it comes to web development so can anyone help me correct my code ? Thank you
This is my index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Login Form</title>
<script type="text/javascript">
$(document).ready(function(){
$("#login").click(function(){
username=$("#user_name").val();
password=$("#password").val();
$.ajax({
type : "POST",
url : "login.php",
data : "username="+username+"&password="+password,
success : function(html){
if(html=='true'){
$("#add_err").html("right username And password");
//$("#login_form").fadeOut("normal");
//$("#shadow").fadeOut();
//$("#profile").html("<a href='logout.php' class='red' id='logout'>Logout</a>");
}else{
$("#add_err").html("Wrong username And password");
}
},
beforeSend:function(){
$("#add_err").html("Loading...")
}
});
return false;
});
});
</script>
</head>
<body>
<?php session_start(); ?>
<div id="profile">
<?php if(isset($_SESSION['user_name'])){ ?>
<?php } ?>
</div>
</body>
<?php if(empty($_SESSION['user_name'])){ ?>
<div class="container" id="login_form">
<section id="content">
<form action="login.php">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username" required="" id="user_name" name="user_name"/>
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" name="password"/>
</div>
<div class="err" id="add_err"></div>
<div>
<input type="submit" value="Log in" id="login" />
</div>
</form>
<div class="button"> </div>
</section>
</div>
<?php } ?>
</html>
And this is my login.php code which uses curl
to forward username/pass to appropriate url
<?php
session_start();
$url = http:// //url that recieves username/password and responds if credentials are correct after contacting database
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($_POST));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
curl_close($ch);
return $result;
?>
javascript
$("#login").click(function(){
$.ajax({
type: 'POST',
url: 'login.php',
dataType: 'json',
data: $('#Form').serialize(),
success: function (x) {
$("#add_err").html(x.response);
},
beforeSend:function(){
$("#add_err").html("Loading...")
}
});
return false;
});
html form
<form id="Form" action="login.php">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username" required="" id="user_name" name="user_name"/>
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" name="password"/>
</div>
<div class="err" id="add_err"></div>
<div>
<input type="submit" value="Log in" id="login" />
</div>
</form>
php
<?php
session_start();
header('Content-Type: application/json');
$url = http:// //url that recieves username/password and responds if credentials are correct after contacting database
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($_POST));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
curl_close($ch);
$output=array();
$output['response']=$result;
echo json_encode($output);
?>
Alright, first things first: you can use action="form.php"
OR the click handler $("#login").click(function(){});
. Using both is redundant and will make your javascript form checker void.
So go ahead and remove action="login.php"
.
Next step is making sure your login.php
script is receiving everything correctly. For debug purposes, add
var_dump($_POST);
exit();
To the top of login.php
, then add
console.debug(html);
To the top of your ajax success
function. That'll show you in the console what the PHP script is seeing for $_POST
variables.
Hopefully that helps you get started on diagnosing whatever issue is going on.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.