使用AJAX和PHP检查表单字段 [英] Checking form fields with AJAX and PHP
本文介绍了使用AJAX和PHP检查表单字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试编写一个代码，如果已经注册了用户名/邮件，它将在php文件中签入.以下代码不起作用，因为在两个文件中都触发check_field()时，在check_fields()中，返回值将立即发送，而无需等待异步查询完成.我不想使用JQuery，所以我考虑做以下事情:
I am trying to write a code that will check in a php file if username/mail has already been registered. The following code doesn't work because in check_fields() when check_field() is fired for both files the return is sent immediately, without waiting for the asynchronous query to finish. I don't want to use JQuery so I thought about doing the following :
- 一个函数链接到表单的onsubmit
- 对服务器进行AJAX调用以启动php文件
- 此文件将分析输入，并在需要时返回错误响应:字段为空"，已使用电子邮件"，不正确的电子邮件地址"等...
- 当AJAX调用完成时，将触发一个函数(或回调).此功能将检查
< span id ="username_err"></>和&span id ="mail_err"></>的.textContent.查看php是否注意到错误.如果它不为空(输入中存在问题)，则该函数将false返回到初始函数. - 返回值发送回表格
- 如果为true，则将表单提交到服务器...
- a function is linked to the onsubmit of the form
- a AJAX call is made to the server to launch a php file
- this file analyses the input and return a error response if it needs to : "field is empty", "email already used", "incorrect email adress", ect...
- when the AJAX call is finished a function (or callback) will be fired. This function will check the .textContent of the
<span id="username_err"></>and<span id="mail_err"></>to see if the php has noticed to errors. If it's not blank (there's a problem in the input) the function return false to the initial function. - the return value is sent back to the form
- if true, form is submitted to server...
这就是我想尝试的，可以吗?有没有办法做到这一点?
That's what I would like to try out, is this ok ? Is there a way to do this without a promise ?
[原代码]
<html>
<body>
<form style="text-align:center" action="mama.php" method="post" onsubmit="return check()">
<div class="username">
<span id="label_username">Username :</span>
<input type="text" id="username" name="username">
<p id="username_err"></p>
</div><br />
<div class="mail">
<span id="label_mail">Mail :</span>
<input type="text" id="mail" name="mail"></input>
<p id="mail_err"></p>
</div><br />
<input type="submit" id="envoyer" value="Envoyer" />
</form>
</body>
<script>
function check() {
return check_fields(['username', 'mail']);
}
function check_fields(items) {
var check = true;
for (i = 0; i < items.length; i++) {
check_field(items[i]);
};
for (i = 0; i < items.length; i++) {
var value = document.getElementById(items[i] + '_err').textContent;
if (value != '') {
check = false
}
};
return check
}
function check_field(id) {
var value = document.getElementById(id).value;
ajax_php(id, value, 'check_field.php', function(returned_value) {
document.getElementById(id + '_err').innerHTML = returned_value;
});
}
function ajax_php(id, value, file, fn) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
fn(xmlhttp.responseText);
}
};
xmlhttp.open('GET', file + '?' + id + '=' + value, true);
xmlhttp.send();
}
</script>
</html>
[可能的解决方案]
<html>
<body>
<form style="text-align:center" action="mama.php" method="post" onsubmit="check(this)">
<div class="username">
<span id="label_username">Username :</span>
<input type="text" id="username" name="username">
<p id="username_err"></p>
</div><br />
<div class="mail">
<span id="label_mail">Mail :</span>
<input type="text" id="mail" name="mail"></input>
<p id="mail_err"></p>
</div><br />
<input type="submit" id="envoyer" value="Envoyer" />
</form>
</body>
<script>
function check_fields(form, items) {
var success = true;
function check_field(i) {
var id = items[i];
var value = document.getElementById(id).value;
ajax_php(id, value, 'check_field.php', function(returned_value) {
document.getElmentById(id + '_err').textContent = returned_value;
if (returned_value != '') {
success = false;
}
if (++i < items.length) {
check_field(i); // Check the next field
} else if (success) { // reached the last field with no errors
form.submit();
}
});
}
check_field(0);
}
function check(form) {
check_fields(form, ['username', 'mail']);
return false; // prevent form submission
}
function ajax_php(id, value, file, fn) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
fn(xmlhttp.responseText);
};
};
xmlhttp.open('GET', file + '?' + id + '=' + value, true);
xmlhttp.send();
};
</script>
</html>
推荐答案
束缚每个字段的AJAX调用.字段 i 的回调提交AJAX调用以检查字段 i + 1 ，依此类推.如果所有操作都成功，则最后一个回调将提交表单.
Chain the AJAX calls for each field. The callback for field i submits the AJAX call to check field i+1, and so on. The last callback submits the form if all were successful.
function check_fields(form, items) {
var success = true;
function check_field(i) {
var id = items[i];
var value = document.getElementById(id).value;
ajax_php(id, value, 'check_field.php', function(returned_value) {
document.getElementById(id + '_err').textContent = returned_value;
if (returned_value != '') {
success = false;
}
if (++i < items.length) {
check_field(i); // Check the next field
} else if (success) { // reached the last field with no errors
form.submit();
}
});
}
check_field(0);
}
function check(form) {
check_fields(form, ['username', 'mail']);
return false; // prevent form submission
}
该表单应包含:
onsubmit="return check(this)"
这篇关于使用AJAX和PHP检查表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
