2013-04-14 3 views
2

Скажем, у меня есть форма, как это (взято из книги на JQuery):Как JQuery Ajax на самом деле работает

<body> 
<form> 
<label>Enter your Name</label> 
<input type="text" name="uname" class="uname"/> <br/> 
<input type="submit" id="submit"/> 
</form> 
<div id="message"></div> 
</body> 

и функцию Ajax, как это:

$(document).ready(function() { 
    $('#submit').click(function() { 
    var name = $('.uname').val(); 
    var data = 'uname=' + name; 
     $.ajax({ 
     type:"POST", 
     url:"welcome.php", 
     data: data, 
     success: function (html) { 
      $('#message').html(html); 
     } 
     }); 
     return false; 
    }); 
}); 

и файл сценария выглядит так:

<?php 
$name = $_POST['uname']; 
echo "Welcome ". $name; 
?> 

он будет работать, но вот что я не могу понять. Если скрипт welcome.php получает значение $ name из массива POST, почему он должен иметь данные, отправленные ему по запросу ajax? В массиве POST уже содержится эта информация?

Кроме того, я понимаю, что запрос ajax находится в форме пар ключ/значение, но данные отправляются в форме uname = name, но пары ключ/значение обычно не имеют знака равенства.

Что здесь происходит - это работает, но это не имеет смысла для меня, и я ненавижу просто пробивать код, который я узнал от rote.

+1

jQuery захватывает вашу форму submit, поэтому обычного механизма заполнения данных 'POST' не происходит. jQuery вместо этого отправляет свои собственные данные, которые могут быть любыми, и в этом случае это поле формы. – Dave

+1

'return false;' делает так, чтобы форма не отправлялась. 'ajax' отправляет данные на сервер и получает ответ в' success function'. Это позволяет нам подражать форме submit без обновления страницы. – Ohgodwhy

+0

Где еще php получит значение формы, кроме как из данных сообщения? Вот что такое массив POST *. –

ответ

0

Проблема с вашим кодом
var data = 'uname =' + name;
use
var data = '{uname:' + name + '}';
, потому что его почтовый метод

2

jQuery AJAX работает асинхронно. Форма не публикуется, так как вы можете видеть, что в теге формы нет атрибута действия или метода.

jQuery перехватывает нажатие кнопки и устанавливает новый асинхронный запрос, а затем добавляет данные к этому запросу и отправляет его на сервер.

Смежные вопросы