Проблемы с отправкой данных формы с помощью ajax

Question

Проблемы с отправкой данных формы с помощью ajax

Я новичок в AJAX. я в курсе HTML, PHP. Я хочу сделать операцию CRUD в AJAX. я создал два файла

index.php
insert.php как ниже.

Когда я нажимаю кнопку «Отправить», он отправляет данные и вставляет их в базу данных. Но это освежает страницу. Пожалуйста, предложите мне, где я сделал ошибку.

мой код, как показано ниже:

index.php

<!DOCTYPE html>
<html>
<head>
<title>Ajax test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});

ev.preventDefault();
});
</script></head>
<body>
<form id="contactForm1" action="insert.php" method="post">
<label>Name</label><input type="text" name="user_name"><br>
<label>Age</label><input type="number" name="user_age"><br>
<label>Course</label><input type="text" name="user_course">
<br>
<input type="submit" name="sumit" value="submit">
</form>

</body>
</html>

insert.php

<?php$conn = mysqli_connect("localhost", "root", "" ,"aj");

$name = $_POST['user_name'];
$age = $_POST['user_age'];
$course = $_POST['user_course'];$insertdata=" INSERT INTO test3 (name,age,course) VALUES( '$name','$age','$course' ) ";
mysqli_query($conn,$insertdata);?>

1

ajax ajaxform php

Решение

Другие решения

Код JavaScript, связывающий обработчик событий, выполняется слишком рано. DOM еще не загружен полностью, поэтому форма не может быть найдена. JQuery не предупреждает об этом.

Либо оберните ваш код в jQuery для загруженного документа $(function(){ /* code here */ } ),

Или / и переместите ваш JavaScript в конец вашего HTML. Это предпочтительный метод. Увидеть Преимущества загрузки JS внизу, а не вверху документа Больше подробностей

0

Там нет ошибки. Технически это правильно. Это просто не подходит для вашего случая использования.
Поведение по умолчанию обновляет страницу, когда пользователь отправляет форму.
У вас есть два варианта:

Остановите дальнейшее выполнение, когда ваш вызов ajax завершен. Вы можете сделать это с помощью JavaScript с помощью preventDefault метод. Затем используйте return false,
Измените кнопку отправки на обычную кнопку. Другими словами, не отправляйте форму обычным способом. Присвойте идентификатор нормальной кнопке и вызовите функцию javascript при ее нажатии.

0

Источник

Accepted Answer

Закройте тег скрипта

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Используйте, когда документ готов

$( document ).ready(function() {
var frm = $('#contactForm1');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
frm[0].reset();
alert('ok');
}
});

ev.preventDefault();
});
});

Событие ready происходит, когда DOM (объектная модель документа) была
загружен. Поскольку это событие происходит после того, как документ готов, это
хорошее место, чтобы иметь все другие события и функции jQuery. Как в
пример выше. Метод ready () указывает, что происходит, когда готов
событие происходит.

1