Не работает ни один из вариантов отправки аякс без перезагрузки. Где косяк?

Question

[vladislav997]

Не работает ни один из вариантов отправки формы без перезагрузки. В чём проблема? Несколько примеров, которые пробовал:

Вариант 1

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<form method="post" action="add.php" id="post_form">
	<p><label>Имя <input type="text" name="title" required></label></p>
	<p><button type="submit">Отправить</button></p>
</form>

<div id="post_form_success"></div>

<script>
$(document).ready(function() {
	$('#post_form').submit(function(){
		$.post("add.php", $("#post_form").serialize(),  function(response) {
			$('#post_form').hide('slow');
			$('#post_form_success').html(response);
		});
		return false;
	});
});
</script>

Вариант 2

<form id="form" action="add.php">
    <input type="text" name="title">
    <button type="submit" name="submit">SEND</button>
	</form>
	
	<script>
    $(document).ready(function() {
    
    	$("#form").submit(function() {
    		$.ajax({
    			type: "POST",
    			url: "add.php",
    			data: $(this).serialize()
    		}).done(function() {
    			$(this).find("input").val("");
    			/*alert("Good");*/
    			$("#form").trigger("reset");
    		});
    		return false;
    	});
    	
    });
	</script>

Вариант 3

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  
<form method="POST" id="form" action="add.php">
    <input type="text" name="title">
    <button type="submit" name="submit">SEND</button>
</form>
  
<script>
$(document).ready(function(){
    $("#form").submit(function() { //устанавливаем событие отправки для формы с id=form
            var form_data = $(this).serialize(); //собераем все данные из формы
            $.ajax({
            type: "POST", //Метод отправки
            url: "add.php", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                   //код в этом блоке выполняется при успешной отправке сообщения
                   alert("Ваше сообщение отпрвлено!");
            });
    });
});
</script>

Вариант 4

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<form method="POST" action="add.php" id="my_form">
    <input type="text" name="title">
    <button type="submit" name="submit">SEND</button>
</form>

<script>
$("#my_form").submit(function(event){
	event.preventDefault(); //prevent default action 
	var post_url = $(this).attr("action"); //get form action url
	var request_method = $(this).attr("method"); //get form GET/POST method
	var form_data = $(this).serialize(); //Encode form elements for submission
	
	$.ajax({
		url : post_url,
		type: request_method,
		data : form_data
	}).done(function(response){ //
		$("#server-results").html(response);
	});
});
</script>

Подскажите пожалуйста простой рабочий пример на 1 инпут. Без аякса всё работает

Comments

[Kovalsky]

[vladislav997]

Kovalsky, ах, да. первая страница гугла перерыта.

[Kovalsky]

vladislav997, а как насчет вариантов которые я мышой выделил?

Кстати четвертый должен работать

[vladislav997]

Kovalsky, четвертый никак не реагирует на отправку, и ничего не приходит

Answer 1

[zkrvndm]

Попробуйте так:

<script>
document.querySelector('form#form').setAttribute('onsubmit', 'event.preventDefault(); send_form();');

function send_form() {
  var send_text = document.querySelector('form#form > input[name="title"]').value;
  var xhr = new XMLHttpRequest();
  var body = 'title=' + encodeURIComponent(send_text);
  xhr.open('POST', 'add.php');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      alert(xhr.responseText);
    }
  }
  xhr.send(body);
}
</script>

Comments

[vladislav997]

в третьем варианте идёт редирект после отправки на add.php

[zkrvndm]

vladislav997, попробуйте вставить отмену действия по умолчанию:

<script>
$(document).ready(function(){
    $("#form").submit(function() { //устанавливаем событие отправки для формы с id=form
            event.preventDefault();
            var form_data = $(this).serialize(); //собераем все данные из формы
            $.ajax({
            type: "POST", //Метод отправки
            url: "add.php", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                   //код в этом блоке выполняется при успешной отправке сообщения
                   alert("Ваше сообщение отпрвлено!");
            });
    });
});
</script>

[vladislav997]

Надим Закиров, попробовал. всё-равно редирект

[Kovalsky]

Каким образом получилось так, что вы, Надим Закиров, дали код в котором очевидно есть ошибка, а вы, vladislav997, не заметили её в консоли?

Объявите переменную которая будет содержать ссылку на событие

[zkrvndm]

Kovalsky, мой косяк. Вообще, можно отправить форму на чистом JS. Владислав, попробуйте так:

<script>
document.querySelector('form#form').setAttribute('onsubmit', 'event.preventDefault(); send_form();');

function send_form() {
	var send_text = document.querySelector('form#form > input[name="title"]').value;
	var xhr = new XMLHttpRequest();
	var body = 'title=' + encodeURIComponent(send_text);
	xhr.open('POST', 'add.php');
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.onreadystatechange = function() {
		if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
			alert(xhr.responseText);
		}
	}
	xhr.send(body);
}
</script>

Answer 2

[historydev]

Перестать юзать этот калл и научиться использовать

fetch

preventDefault()

Comments

[zkrvndm]

Fetch на старых браузерах или в том же IE может не сработать. Если нужна максимальная поддержка, jQuery один из простых вариантов. И не надо тут про Babel, задолбали уже с этим Babel. Лично мне не нравятся все эти новомодные стрелочный функции и новые стандарты, буду консерватором до последнего.