我正在尝试使用Ajax和PHP创建一个登录系统,但是,一旦我单击<button>
并且?
显示我的URL,我的页面就会不断重新加载。
即
localhost/ethics.php
成为
localhost/ethics.php?
我试过e.preventdefault
但它不起作用,这真的很令人沮丧。
这是 HTML 代码
<form class="form-horizontal">
<h4 class="text-center panel-heading">
Login
</h4>
<hr>
<div class="alert alert-danger user-empty" style="display:none">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Username field is empty.
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-8 col-xs-offset-2 " >
<div class="input-group form-group">
<!--<div class="input-group">-->
<span class="input-group-addon"><span class="glyphicon glyphicon-user "></span></span>
<input type="text" class="form-control username" id="username" placeholder="Username">
<!--</div>-->
</div>
</div>
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-8 col-xs-offset-2 ">
<div class="input-group form-group ">
<!--<div class="form-group">-->
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control password" id="password" placeholder="Password">
<!--</div>-->
</div>
</div>
<div class="form-group form-group-sm">
<button class="btn btn-primary col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-4 col-xs-offset-4 sign-in " type="submit">Sign In <i class="glyphicon glyphicon-log-in"></i></button>
</div>
</div><!-- End of row -->
</form>
如您所见,我使用了<button>
而不是<input="submit">
这是我的阿贾克斯
$(".sign-in").click(function(){
//Login Variables
var username = $(".username").val();
var password = $(".password").val();
//Setup login data structure
var login_Data=
{
'key':"Login",
'username': username,
'password': password
}
//If the Input isnt empty, make the Ajax call
if(input_Check(username,password) == true)
{
var a1= $.ajax({
data:login_Data,
type:"POST",
url: './php/test.php',
dataType: 'json',
cache:true,
beforeSend: function()
{
$(".sign-in").text("connecting...");
},
});
/**a2 = a1.then(function() {
// .then() returns a new promise
/**return $.ajax({
url: './php/insSession.php',
type:"POST",
//dataType: 'json',
data: {'user_Id':data.user_Id,
}
});**/
//return $.getJSON('./php/insSession.php');
//});//end of a2
//after the promise is returned, check the personcode to determine the user's status and redirect them accordingly
/**a2.done(function(jd,textStatus,xhr) {
);
a2.fail(function(){
$("hr").append("<p class="text-danger text-center">Problem with Ajax Call </p>");;
});**/
}// end of input_Check if statement
});//end of click method
试试这个
$("button#mybutton").click(function(event) {
event.preventDefault();
jQuery.ajax({
type: "POST",
url: "<your url>",
data:{data1:data1},
dataType: 'json',
success: function(resp) {
if (resp)
{
//success
}}
});
//return false;
});
尝试为表单提供一个 ID。
所以这个
<form class="form-horizontal" >
变成这个
<form id="myId" class="form-horizontal" >
.JS:
jQuery.ajax({
type: "POST",
url: "<your url>",
data:{data1:data1},
dataType: 'json',
success: function(resp) {
if (resp)
{
//success
}}
});