Отправка всех полей формы на сервер с помощью ajax jQuery.

25.01.2019 HELP, HTML CSS, jQuery, PHP Оставить комментарий 2 Просмотры

Как отправить данные с формы без перезагрузки страницы, да легко с помощью ajax.

Создадим простенькую форму:

<form method="POST" id="formx" action="javascript:void(null);" onsubmit="call()">

  <label for="name">Name:</label>
  <input id="name" name="name" value="" type="text">

  <label for="email">Email:</label>
  <input id="email" name="email" value="" type="text">

  <input value="Send" type="submit">

</form>

<label for="email">Email:</label>

</form>

И делаем непосредственно наш Javascript

<script type="text/javascript" language="javascript">
 	function call() {
 	  
 	    var msg   = $('#formx').serialize();
        $.ajax({
          type: 'POST',
          url: 'res.php',
          data: msg,
          success: function(data) {
            $('#results').html(data);
          },
          error:  function(xhr, str){
	        alert('Возникла ошибка: ' + xhr.responseCode);
          }
        });
 
    }
</script>

function call() {

var msg = $('#formx').serialize();

$.ajax({

type: 'POST',

url: 'res.php',

data: msg,

success: function(data) {

$('#results').html(data);

error: function(xhr, str){

alert('Возникла ошибка: ' + xhr.responseCode);

}

});

}

</script>

Ну и непосредственно (res.php) файл который будет принимать наши

данные и возвращать нам ответ:

echo "<pre>";
	print_r($_POST);
echo "</pre>";

echo "<pre>";

print_r($_POST);

echo "</pre>";

Не забываем подключить jQuery

Отправка всех полей формы на сервер с помощью ajax jQuery.

Про Александр

Проверьте также

Добавить комментарий Отменить ответ