pooya1072
چهارشنبه 24 مرداد 1397, 01:40 صبح
با سلام
یک صفحه html به عنوان فرم ثبت نام طراحی شده که شامل یک input از نوع text جهت ورود نام کاربری و یک label برای نمایش وضعیت در دسترس بودن یا نبودن نام کاربری وارد شده است. قرار است که از لحظه ورود کلمه سوم به بعد تابع Ajax فعال بشه و در دسترس بودن یا نبودن نام کاربری وارد شده را در label اعلام کنه. من نمونه کدی را پیدا کردم و با تغییرات جزیی اون را روی فرم برنامه خودم پیاده کردم . این کد فقط یک مشکل داره و اون اینه که وقتی برای اولین بار فرم را اجرا میکنم و سه حرف اول نام کاربری را وارد میکنم (بسته به اینکه فرم با کدام مرورگر اجرا شده باشه) بین 6 تا 10 ثانیه طول میکشه تا مشخص بشه نام کاربری در دسترس هست یا نه .بعد از اولین تعیین وضعیت همه چیز نرمال میشه و دیگه بدون تأخیر وضعیت نمایش داده میشه. حتی اگر فرم را Refresh کنم باز هم سریع وضعیت نام وارد شده مشخص میشه. اما اگر فرم را ببندم و دوباره اجرا کنم مشکل تأخیر دوباره بر میگرده . تاکید می کنم فقط در اولین اجرای تابع مشکل دارم و از اولین اجرا به بعد تا وقتی که فرم بازه مشکلی وجود نداره. کد را میزارم تا عزیزان بررسی کنند ... ممنون
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
document.getElementById("txtUserName").onkeyup = function () {
var userName = document.getElementById("txtUserName").value
if (userName.length >= 3) {
jQuery.ajax(
{
url: 'RegisterationService.asmx/UserNameExists',
method: 'post',
data: { userName: userName },
dataType: 'json',
success: function (data) {
var divElement = document.getElementById('label')
if (data.UserNameInUse) {
document.getElementById('label').innerHTML = userName + ' is in Used'
document.getElementById('label').style.color = 'red'
document.getElementById("txtUserName").style.borderColor = "red"
}
else {
document.getElementById('label').innerHTML = userName + ' is available'
document.getElementById('label').style.color = 'green'
}
},
error: function (err) {
alert(err);
}
});
}
}
});
</script>
</head>
<body>
<input id="txtUserName" style="width:50%" type="text" />
<br />
<div style="height:30px; width:50%;">
<label id="label"></label>
</div>
</body>
</html>
یک صفحه html به عنوان فرم ثبت نام طراحی شده که شامل یک input از نوع text جهت ورود نام کاربری و یک label برای نمایش وضعیت در دسترس بودن یا نبودن نام کاربری وارد شده است. قرار است که از لحظه ورود کلمه سوم به بعد تابع Ajax فعال بشه و در دسترس بودن یا نبودن نام کاربری وارد شده را در label اعلام کنه. من نمونه کدی را پیدا کردم و با تغییرات جزیی اون را روی فرم برنامه خودم پیاده کردم . این کد فقط یک مشکل داره و اون اینه که وقتی برای اولین بار فرم را اجرا میکنم و سه حرف اول نام کاربری را وارد میکنم (بسته به اینکه فرم با کدام مرورگر اجرا شده باشه) بین 6 تا 10 ثانیه طول میکشه تا مشخص بشه نام کاربری در دسترس هست یا نه .بعد از اولین تعیین وضعیت همه چیز نرمال میشه و دیگه بدون تأخیر وضعیت نمایش داده میشه. حتی اگر فرم را Refresh کنم باز هم سریع وضعیت نام وارد شده مشخص میشه. اما اگر فرم را ببندم و دوباره اجرا کنم مشکل تأخیر دوباره بر میگرده . تاکید می کنم فقط در اولین اجرای تابع مشکل دارم و از اولین اجرا به بعد تا وقتی که فرم بازه مشکلی وجود نداره. کد را میزارم تا عزیزان بررسی کنند ... ممنون
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
document.getElementById("txtUserName").onkeyup = function () {
var userName = document.getElementById("txtUserName").value
if (userName.length >= 3) {
jQuery.ajax(
{
url: 'RegisterationService.asmx/UserNameExists',
method: 'post',
data: { userName: userName },
dataType: 'json',
success: function (data) {
var divElement = document.getElementById('label')
if (data.UserNameInUse) {
document.getElementById('label').innerHTML = userName + ' is in Used'
document.getElementById('label').style.color = 'red'
document.getElementById("txtUserName").style.borderColor = "red"
}
else {
document.getElementById('label').innerHTML = userName + ' is available'
document.getElementById('label').style.color = 'green'
}
},
error: function (err) {
alert(err);
}
});
}
}
});
</script>
</head>
<body>
<input id="txtUserName" style="width:50%" type="text" />
<br />
<div style="height:30px; width:50%;">
<label id="label"></label>
</div>
</body>
</html>