|
|
|
| Разбираюсь с Ajax. Посыл к учебникам делать не надо, уже читала.
Не могу понять, где ошибка. Надо в ассинхронном режиме проверить поле формы на ошибки. Если есть ошибка - вывести ее возле поля формы в div.
Помогите, пожалуйста, если кто-то уже с этим разбирался.
Упростила уже, как только могла.
Скрипт формы:
<script type="text/javascript" src="form.js"></script>
<style>
.error{
display: block;
color:#ff0000;
}
</style>
<form action="handler_form.php" method="post" id="myform">
Здесь будет текст: <input type = "text" id = "mytext" value="<?php if(isset($_POST['text'])) print $_POST['text'] ?>"
onblur="Check_text(this.value,this.id);">
<div class = "error" id="mytext_error"><div>
<input type="button" value="Отправить" name="allData">
</form>
|
form.js
//объект XMLHttpRequest
var req;
//скрипт на сервере, к которому идет обращение
var url = "handler_form.php";
function Check_text(inputValue, fieldID) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("POST", url, true);
req.send(null);
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("POST", url, true);
req.send();
}
}
}
function processReqChange() {
ab = window.setTimeout("req.abort();", 5000);
if (req.readyState == 4) {
clearTimeout(ab);
if (req.status == 200) {
//вывести текст в нужном диве
message = document.getElementById('mytext_error');
message.innerHTML = req.responseText;
} else {
alert("Не удалось получить данные:\n" + req.statusText);
}
}
}
|
И скрипт на сервере handler_form.php:
<?php
function error_length($item,$notice){
if(isset($_POST[$item])&& $_POST[$item]!='')
return (mb_strlen($_POST[$item]) > 50)? $notice : false;
}
if (isset($_POST)){
var_dump($_POST);
}else{
$response = error_length('mytext', 'Длина поля должна быть не более 50 символов.');
header("Content-type: text/plain; charset=utf8"); //тип документа, кодировка
header("Cache-Control: no-store, no-cache, must-revalidate"); //не кешировать
header("Cache-Control: post-check=0, pre-check=0", false);
echo $response;
}
?>
|
Нажимаю на кнопку - форма вообще не посылается и ошибок никаких не выдает. | |
|
|
|
|
|
|
|
для: Лена
(01.03.2010 в 17:36)
| | >Нажимаю на кнопку - форма вообще не посылается и ошибок никаких не выдает.
Вы аякс запрос проверяете или работает ли кнопка?
<input type="submit" чтобы форма посылалась,
onblur рабочий вроде. | |
|
|
|
|
|
|
|
для: root
(01.03.2010 в 18:25)
| | ><input type="submit" чтобы форма посылалась,
Это да. Позор. То ли от невнимательности, то ли от спешки.
>Вы аякс запрос проверяете или работает ли кнопка?
Разбираюсь в аяксе. Вроде как механизм поняла, но где-то что-то упустила...
Сейчас при том коде, что я дала выше, у меня строка ошибки не возвращается. Значит что-то с onblur неправильно... Вместо строки ошибки - красным шрифтом - array(0) { }
И еще. Делаю alert(req.responseText); - получаю пустой массив. Именно массив, а не строку, как должно быть. | |
|
|
|
|
|
|
|
для: Лена
(01.03.2010 в 21:43)
| | Сама уже разобралась.
function Check_text(inputValue, fieldID) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req) {
var params = "val=" + inputValue + "&id=" + fieldID;
//скрипт на сервере, к которому идет обращение
var url = "handler_form.php";
req.onreadystatechange = processReqChange;
req.open("POST", url, true);
// обязательное для POST указание Content-Type
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.setRequestHeader('Content-length', params.length);
req.send(params);
}
}
|
и серверная сторона:
<?php
function error_length($item,$notice){
if(isset($_POST[$item])&& $_POST[$item]!='')
return (mb_strlen($_POST[$item]) < 3 || mb_strlen($_POST[$item])>50)? $notice : false;
}
if (isset($_POST)){
//var_dump($_POST);
if(isset($_POST['val'])){
$response = error_length('val', 'Длина поля должна быть не менее 3 и не более 50 символов.');
header("Content-type: text/plain; charset=utf8"); //тип документа, кодировка
header("Cache-Control: no-store, no-cache, must-revalidate"); //не кешировать
header("Cache-Control: post-check=0, pre-check=0", false);
echo $response;
}
}
?>
|
Разница между $_GET и $_POST в Аяксе в том, как передаются параметры. При $_POST - как аргумент в send(); При $_GET - как и при любом $_GET параметры передаются через адресную строку.
И при $_POST обязательно надо передавать заголовки методом setRequestHeader. | |
|
|
|
|
|
|
|
для: Лена
(02.03.2010 в 00:21)
| | вроде америку не открыли :) | |
|
|
|
|
|
|
|
для: psychomc
(02.03.2010 в 01:10)
| | Америку не открыла, только почему-то здесь указать на мои ошибки по поводу $_GET-$_POST никто не смог. | |
|
|
|
|
|
|
|
для: Лена
(02.03.2010 в 10:26)
| | вряд ли потому что никто не знает | |
|
|
|