ajax+php实现登录表单,使用JQuery ajax和php登录表单

目标:

第1步:在

JQuery对话框中打开一个表单.用户输入用户名和密码,点击登录.

第2步:Ajax将数据发送到服务器端脚本,在我的例子中是loginproc.php.

第3步:使用loginproc验证登录.如果登录成功,则用户将重定向到页面.

步骤4:否则将消息发送回对话框,并将其附加在对话框本身以及抖动效果中.

截至目前,如果我使用’$(“#admin-form”),第一步和第三步工作正常.sumbit();’就在关闭对话框之前.我不知道如何在diolog中设置无效的登录文本.

码:

$(function() {

var name = $("#name"),

password = $("#password"),

allFields = $([]).add(name).add(password),

tips = $(".validateTips");

function updateTips(t) {

tips

.text(t)

.addClass("ui-state-highlight");

setTimeout(function() {

tips.removeClass("ui-state-highlight", 1500);

}, 500);

}

function checkLength(o, n, min, max) {

if (o.val().length > max || o.val().length < min) {

o.addClass("ui-state-error");

updateTips("Length of " + n + " must be between " +

min + " and " + max + ".");

return false;

} else {

return true;

}

}

function checkRegexp(o, regexp, n) {

if (!(regexp.test(o.val()))) {

o.addClass("ui-state-error");

updateTips(n);

return false;

} else {

return true;

}

}

$("#login-form").dialog({

autoOpen: false,

/* height: 300, */

width: 450,

show: {

effect: "explode",

duration: 1000

},

hide: {

effect: "explode",

duration: 1000

},

modal: true,

buttons: {

"Login": function() {

var bValid = true;

allFields.removeClass("ui-state-error");

bValid = bValid && checkLength(name, "username", 3, 16);

bValid = bValid && checkLength(password, "password", 5, 32);

bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");

bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z_])+$/, "Password field only allow : a-z 0-9");

if (bValid) {

$("#admin_login").submit();

$(this).dialog("close");

}

},

Cancel: function() {

$(this).dialog("close");

}

},

close: function() {

allFields.val("").removeClass("ui-state-error");

}

});

// Link to open the dialog

$("#admin-link").click(function(event) {

$("#login-form").dialog("open");

event.preventDefault();

});

});

这是我需要进行一些更改的代码部分.

if (bValid) {

$("#admin_login").submit();

$(this).dialog("close");

}

请帮我解决这个问题

更新:

表格:

Username

Password

Loginproc.php

require_once 'utils.php';

if (is_null($_POST['user']) || is_null($_POST['pass'])) {

utils::redirect_url("../index.php");

} else {

$utils = new utils();

$username = $_POST['user'];

$password = $_POST['pass'];

$type = 'admin';

$response = $utils->validate_user($username, $password, $type);

if ($response == true) {

return true;

/*

$utils->login_redirect($type); */

} else {

return false;

/* $_SESSION['valid'] = false;

utils::redirect_url("../index.php"); */

}

}

?>

Jquery:

if (bValid) {

var data = $('#admin_login').serialize();

$.ajax({

url: "class/loginproc.php",

type: "post",

data: data,

dataType: "json",

success: function(data) {

if (data.success) {

window.location = "../admin.php";

}

else {

alert('Invalid Login');

}

}

});

$(this).dialog("close");

}

解:

感谢’Mohammad Adil’,我能够解决这个问题.我不得不改变他提供的解决方案以获得适当的结果.因此,我将其发布在此处以供将来参考.

JQUERY

if (bValid) {

var data = $('#admin_login').serialize();

$.ajax({

url: "class/loginproc.php",

type: "post",

data: data,

dataType: "json",

success: function(data) {

window.location = "admin.php";

},

error: function(data) {

alert('invalid');

}

});

$(this).dialog("close");

}

Loginproc:

$response = $utils->validate_user($username, $password, $type);

if ($response == true) {

echo true;

} else {

echo false;

}

问候

Genocide_Hoax