Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Передача формы скрипту через Ajax

Автор: StachelDraht 18.1.2009, 17:30

Всем привет!
Надеюсь пишу в тот раздел.
У меня вопрос.
Как передать все значения из формы php скрипту через Ajax?

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX GuestBook</title>
<script language="JavaScript" src="ajax.js" type="text/javascript"></script>
</head>

<body>
<p id="result"></p>
<form method="post">
<table width="317" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="90">Name:</td>
    <td width="227"><label>
      <input type="text" name="name" id="name" />
    </label></td>
  </tr>
  <tr>
    <td>E-Mail:</td>
    <td><input type="text" name="mail" id="mail" /></td>
  </tr>
  <tr>
    <td>Message:</td>
    <td><label>
    <textarea name="message" id="message" cols="24" rows="5"></textarea>
    </label></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <input type="submit" name="button" id="button" value="Отправить" onClick="javascript:sendRequest('test.php', 'result', getRequest);"/>
    </td>
  </tr>
</table>
</form>
</body>
</html>

ajax.js

Код


function createHttpRequest() {

    var httpRequest;

    var browser = navigator.appName;



    if (browser == "Microsoft Internet Explorer") {



        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

    } else {

        httpRequest = new XMLHttpRequest();

    }



    return httpRequest;

}

function sendRequest(file, _resultId, getRequestProc) {

    resultId = _resultId;

    document.getElementById(resultId).innerHTML = 'Please wait...';

    httpRequest.open('get', file);



    httpRequest.onreadystatechange = getRequestProc;

    httpRequest.send(null);

} 

function getRequest() {

    if (httpRequest.readyState == 4) {

        document.getElementById(resultId).innerHTML = httpRequest.responseText;

    }

}

var httpRequest = createHttpRequest();

var resultId = '';

Если сделать просто ссылку с

Код


value="Отправить" onClick="javascript:sendRequest('test.php', 'result', getRequest);"

результат выводит замечательно

а из формы и с помощью кнопки ничего не работает.

Спасибо!

Автор: bars80080 18.1.2009, 21:22

ну, надо всё-таки понимать, что ты делаешь, а не совершать магические пасы руками, авось заработает

вот скажи, ты ссылкой передаёшь значения формы? наверное, нет. просто отсылаешь запрос (без данных) и получаешь ответ - результат

а формулировка "отослать форму" вообще не коректна. надо отослать данные из формы, но перед этим их нужно собрать, присоединить к адресу (file), раз уж метод get, и затем уже отослать

повыдёргивайте данные из инпутов за id, присоедините к адресу file += '?name=' + document.getElementById('name').value + '&mail=' + docu...; и т.д.
и уже такую строку засуньте в httpRequest.open('get', file);

Автор: StachelDraht 18.1.2009, 22:26

bars80080,
вобще честно говоря не очень понимаю что делаю. Методом тыка.
Сейчас попробую, спасибо за ответ!

Автор: StachelDraht 18.1.2009, 22:45

Код


<input type="submit" name="add" id="button" value="Отправить" onClick="javascript:sendRequest('dogb.php+='?name=' + document.getElementById('name').value + '&mail=' + document.getElementById('mail').value + '&message=' + document.getElementById('message').value', 'result', getRequest);" />

експлорер говорит что ошибка

А если использовать метод post, таким же макаром надо отсылать?
И при нажатии на кнопку, результат выводится только на секунду. Почему так?

Автор: bars80080 19.1.2009, 01:01

Код


<input type="submit" name="button" id="button" value="Отправить" onClick="javascript:sendRequest('http://server.ru/test.php', 'result', getRequest);"/>

Код


function sendRequest(file, _resultId, getRequestProc) {

    resultId = _resultId;

    document.getElementById(resultId).innerHTML = 'Please wait...';

    file += '?name=' + document.getElementById('name').value + '&mail=' + document.getElementById('mail').value + '&message=' + document.getElementById('message').value;

    httpRequest.open('get', file);
    httpRequest.onreadystatechange = getRequestProc;

    httpRequest.send(null);

}

Автор: StachelDraht 19.1.2009, 01:20

bars80080, спасибо тебе большое!
Все равно многое не понимаю.
Я думал файл ajax.js на все случаи жизни... но про это еще почитаю.
А вот почему результат отображается меньше секунды и куда то исчезает?

Автор: bars80080 19.1.2009, 10:59

Цитата(StachelDraht @ 19.1.2009, 00:20

)

А вот почему результат отображается меньше секунды и куда то исчезает?

это я уже не скажу. может другой код виноват? приведи полностью всю страницу

Автор: StachelDraht 19.1.2009, 14:30

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX GuestBook</title>
<script language="JavaScript" src="ajax.js" type="text/javascript"></script>
</head>

<body>
<div id="result"></div>
<form action=""  method="post">
<table width="317" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="90">Name:</td>
    <td width="227"><label>
      <input type="text" name="name" id="name" />
    </label></td>
  </tr>
  <tr>
    <td>E-Mail:</td>
    <td><input type="text" name="mail" id="mail" /></td>
  </tr>
  <tr>
    <td>Message:</td>
    <td><label>
    <textarea name="message" id="message" cols="24" rows="5"></textarea>
    </label></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <input type="submit" name="add" id="button" value="Отправить" onClick="javascript:sendRequest('http://localhost/dogb.php', 'result', getRequest);"/>
    </td>
  </tr>
</table>
</form>

<a href="" onClick="javascript:sendRequest('dogb.php', 'result', getRequest);">Test!</a>
</body>
</html>

и грубо говоря обработчик

Код


<?
//var_dump($_GET);
$database = "test_table";
$connection = mysql_connect ("localhost", "user", "pass");
if (!$connection)
    {
        exit("Error c");
    }
    else
    { 
            echo ("");
    }
    
$db = @mysql_select_db ($database, $connection)
    or die("Can`t select DataBase");
    
$name = $_GET['name'];
$mail = $_GET['mail'];
$message = $_GET['message'];
//echo "<br>".$name."<br>".$mail."<br>".$message;
mysql_query("INSERT INTO book SET id='', name='".$name."', mail ='".$mail."', message ='".$message."' ");

function show() {
$show = mysql_query("SELECT * FROM book order by id");
if (!$show) exit(mysql_error());
echo "<table>";
while(list($id, $name, $mail, $message) = mysql_fetch_row($show)) {

    echo '<tr>';
      echo '
    <td>'.$id.'</td>
    <td>'.$name.'</td>
    <td>'.$mail.'</td>
    <td>'.$message.'</td>
    </tr>
      ';
}
echo '</table>';
};
echo show();
?>

Есть какие нибудь не очень замудреные уроки по Ajax + php ???

Автор: bars80080 19.1.2009, 15:55

так это всё на локалке?

попробуй написать так:

Код


<input type="submit" name="add" id="button" value="Отправить" onClick="javascript:sendRequest('http://localhost/dogb.php', 'result', getRequest); return false;"/>

Автор: StachelDraht 19.1.2009, 17:05

а я тестил и на локалке и сервере хостера, идентично

Добавлено через 3 минуты
Да, все работает!
Спасибо!

Автор: Aliance 21.1.2009, 09:40

Я бы советовал вместо input с типом submit, использовать button. Тогда и ложь возвращать не придется. Хотя тут палка о двух концах - тогда те, у кого отключен JS не смогут вообще отправить данные.
Следующее, аттрибуты обработчиков событий лучше писать в нижнем регистре. То есть все onClick заменить на onclick
И последнее, в псевдо-протокол javascript: необходимо писать только в ссылках, а не обработчиках событий.

Автор: StachelDraht 21.1.2009, 14:18

Aliance, спасибо!
Буду иметь в виду.

Автор: finogeev 12.2.2009, 15:53

Ну раз все получилось, может финальным кодиком поделишься ... такая же сейчас ситуация встала ... Не могу в скрипт ajax передать данные из формы :(

Автор: StachelDraht 12.2.2009, 16:21

finogeev,

Код


<head> 
    <script type="text/javascript" src="path/to/jquery.js"></script> 
    <script type="text/javascript" src="path/to/form.js"></script> 
 
    <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head>

Код


<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

http://malsup.com/jquery/form/
С этого же сайта слей плагин

Автор: finogeev 13.2.2009, 08:10

Спасибо большое !!!!!!!!!!!