Как отправить POST запрос через JavaScript?

Question

[rusgayfer]

На сайте есть формы для отправки данных. Но когда отправляешь все работает хорошо, но когда хочешь перезагрузить страницу вылазит окно от браузера, если перезагружаешь запрос происходит еще раз. Как это избежать? Пожалуйста, помогите со скриптом, покажите как сделать скрипт отправки запроса под мою форму. Можно пример кода под мою форму, дальше для других все сам) Пробывал делать, что-то не работало

<form class="form-horizontal" name="tab3" id="tab3" method="post" enctype="multipart/form-data" >
<fieldset>
<div class="form-group">
<label class="col-lg-4 control-label" for="focusedInput">Выберите группу:
</label>
 <div class="col-lg-6">
      <select class="form-control" id="sel1" name="taskOption_dr">
       <option value="0">- Не выбрано -</option>
	          {listforfoto}
	  </select>
       <p>В это сообщество будем постить дни рождения</p>
	   </div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label" for="focusedInput">Время публикаций:</b>
</label>
 <div class="col-lg-6">
     <div class="input-group date" id="datetimepicker3tab" >
    <input type="text" class="form-control" name="date_dr" placeholder="{datewiev}" required>
    <span class="input-group-addon">
      <span class="glyphicon-time glyphicon"></span>
    </span>
  </div>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label" for="focusedInput">Хэштеги:</b>
</label>
 <div class="col-lg-6">
    <input type="text" class="form-control" name="hash_dr" placeholder="#хэштеги">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label" for="focusedInput">Положение хэштегов:
</label>
<div class="col-lg-6">
	<div class="radio">
    <label><input type="radio" name="hash_pozdr" value="1">В начало</label>
	<label><input type="radio" name="hash_pozdr" value="2">В конец</label>
</div>
</div>
</div>
<div id="photo1" style="display: block;">
				<div class="panel-body">			
<div class="form-group">
<label class="col-lg-4 control-label" for="focusedInput">Прикепить: <br>
<small>Фотоподпись</small>
</label>
 <div class="col-lg-6">
 <div class="file-form-wrap">
		<div class="file-upload">
			<label>
			<input id="uploaded-file3" type="file" name="file_dr" onchange="getFileParam3();" accept="image/*">
			<span>Выберите файл</span>
			</label>
		</div>
		<div id="preview3">&nbsp;</div>
		<div id="file-name3">&nbsp;</div>
		<div id="file-size3">&nbsp;</div>
	</div>		    
</div>
 </div>
  </div>
   </div>
<div class="form-group">
<label class="col-lg-4 control-label" for="focusedInput"></label>
 <div class="col-lg-6">
 <input type="submit" class="btn btn-success" value="Добавить задание" name="dr">
   </div>
 </div>
</fieldset></form>

Answer 1

[Евгений Калибров]

на JQuery:
idForm - id формы

$("#idForm").submit(function(e) {

    var url = "path/to/your/script.php";

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(),
           success: function(data)
           {
               alert(data);
           }
         });

    e.preventDefault();
});

Comments

[rusgayfer]

А как под мой код, чтобы из полей данные взять? У меня запрос происходит на ту же страницу site.ru/posting

[Anton Mashletov]

rusgayfer, #idForm поменял на свой? submit вообще выполняется?

[Евгений Калибров]

В вашем случае #idForm нужно заменить на - #tab3

[rusgayfer]

Евгений Калибров, сделал вот так:

$("#tab3").submit(function(e) {

    var url = "/posting";

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(),
           success: function(data)
           {
               alert(data);
           }
         });

    e.preventDefault();
});

В итоге получаю вот такое:

[Евгений Калибров]

rusgayfer, ну значит AJAX запрос отрабатывает и вы видите alert окно? На сервере нужно ваш POST запрос отловить и правильно обработать.

[rusgayfer]

Евгений Калибров, все поля отправляются сразу? И как отобразить что запрос отправлен, и ошибки запроса?

[Егор Живагин]

rusgayfer, не везде поменяли id, должно быть так:

$("#tab3").submit(function(e) {

    var url = "/posting";

    $.ajax({
           type: "POST",
           url: url,
           data: $("#tab3").serialize(),
           success: function(data)
           {
               alert(data);
           }
         });

    e.preventDefault();
});

[rusgayfer]

Егор Живагин, сделал, все работает так же

[Егор Живагин]

rusgayfer, так запрос-то отправляется? Всё работает? На сервер что приходит?
Окно можно убрать, удалив строчку с alert

[Евгений Калибров]

rusgayfer, на сервере отлавливайте POST запрос и отдавайте в ответ JSON строку. В JS-скрипте парсите строку с ответом от сервера вместо - alert(data);

[rusgayfer]

Евгений Калибров, можно пример? Я больше разбираюсь в PHP, хочу перевести сайт на JS.
Вот так принимаю данные

$stmtdr = $db->dbStream->prepare("INSERT INTO `birthdays` (`id_group`, `owner_id`, `date_dr`, `date_create`, `attachements_photo`, `token`, `hash_dr`, `hash_pozdr`) VALUES (?,?,?,?,?,?,?,?)");
            $stmtdr->bindValue(1, $_POST["taskOption_dr"], PDO::PARAM_INT);
            $stmtdr->bindValue(2, $_SESSION['user_id'], PDO::PARAM_INT);
            $stmtdr->bindValue(3, $_POST['date_dr'], PDO::PARAM_STR);
			$stmtdr->bindValue(4, $dateTime, PDO::PARAM_STR);
			$stmtdr->bindValue(5, $attachdr, PDO::PARAM_STR);
			$stmtdr->bindValue(6, $_SESSION['access_token'], PDO::PARAM_STR);
			$stmtdr->bindValue(7, $hash_dr, PDO::PARAM_STR);
			$stmtdr->bindValue(8, $hash_pozdr, PDO::PARAM_INT);