@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 инпут. Без аякса всё работает
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ответы на вопрос 2
@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>
Ответ написан
HistoryART
@HistoryART
^Спасибо - отметить ответом
Перестать юзать этот калл и научиться использовать
fetch
preventDefault()
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы