Как я могу использовать jQuery для отправки формы без обновления?

Question

У меня есть эта форма:

<form id="myform" name="myform" action="test.php" method="post">
<input type="text" name="shout-in" id="proShoutIn" maxlength="80" />
<a href="#" id="add_shout"><img src="post.gif"/></a>
</form>

как я могу сделать пост Ajax, чтобы я мог использовать if (isset($_POST['shout-in'])){..do something..}? Мне нужно получить значение, которое вводится в <input> и сделать сообщение с ним.

есть идеи? спасибо

Answer 1

$('#add_shout').click(function () {
    var $form=$('#myform');
    $.post($form.attr('action'), $form.serialize());
});

• $. Post () - $.ajax() сокращение для метода POST
• .serialize () - создает текстовую строку в стандартной нотации в кодировке URL

С 3-м (необязательным) параметром $.post() вы можете указать функцию обратного вызова, которая будет принимать все, что было отправлено обратно, в качестве единственного параметра. Он будет запущен после успешного завершения AJAX-запроса (поэтому вы можете вносить изменения в DOM, которые зависят от вызова AJAX и т. Д.).

Возможно, вы также захотите запретить отправку формы по умолчанию (во многих браузерах нажатие клавиши Enter в поле ввода вызовет ее) и запустить отправку AJAX:

$('#myform').submit(function (e) {
     $('#add_shout').click();
     e.preventDefault();
});

Answer 2

   $("#myform").submit(function (e) {
      $.post(this.action, $(this).serialize(), function (data) {
         //handle response
      });
      //prevent form from submitting.  In jQuery, do not use return false
      e.preventDefault();
   }

Answer 3

$.post("test.php", $("#myform").serialize(),
    function(data) {
      // do something with the response
    }
);

Answer 4

Неттус плюс:

Отправить форму без обновления страницы, используя jQuery