Проблемы с сохранением страницы с помощью ajax
У меня есть форма. Моя цель - отправить и вставить значения формы в мою базу данных. потом
- Очистить ввод формы
- Покажите успешное сообщение. Как это:
Мои проблемы: Когда я нажимаю кнопку «сохранить», меня перенаправляют на другую страницу.
Это операционная ошибка:
и смените страницу
¿В чем проблема моего кода?
html
<html>
<head><title>Insert Data Into MySQL: jQuery + AJAX + PHP</title></head>
<body>
<form id = "myForm" action = "userInfo.php" method = "post">
Name: <input type = "text" name = "name" /><br />
Age : <input type = "text" name = "age" /><br />
<button type = "submit" id = "sub">Save</button>
</form>
<span id = "result"></span>
<script src = "script/jquery-1.8.1.min.js" type = "text/javascript"></script>
<script src = "script/elscript.js" type = "text/javascript"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
</body>
</html
Это мой сценарий
$("#myForm").submit( function(e) {
// Prevent the normal form submission event
e.preventDefault();
// Create an object of the form
var form = $(this);
// Make an AJAX request
$.post(this.action, form.serializeArray(), function(info) {
// Clear the form
form[0].reset();
// Display message
$("#result").html(info);
});
});
Наконец, мой код для вставки
<?php
$conn = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('practicas');
$name = $_POST['name'];
$age = $_POST['age'];
if (mysql_query("INSERT INTO ajaxtabla VALUES('$name', '$age')"))
echo "Successfully Inserted";
else
echo "Insertion Failed";
?>
Спасибо за помощь мне
прости Майки, в моем университете нас ничему этому не учат. Я должен искать вещи, чтобы сделать домашнюю работу. по этой причине я ничего не понимаю, у меня и у моих коллег плохая база программирования
правильно ли вы включили файлы сценариев?
Что ты имеешь в виду??
Ответы 2
Вы можете упростить код, используя только один обработчик событий при отправке формы. Кроме того, вам необходимо включить e.preventDefault(), который предотвращает нормальную работу кнопки отправки.
$("#myForm").submit( function(e) {
// Prevent the normal form submission event
e.preventDefault();
// Create an object of the form
var form = $(this);
// Make an AJAX request
$.post(this.action, form.serializeArray(), function(info) {
// Clear the form
form[0].reset();
// Display message
$("#result").html(info);
});
});
Также дайте вашей кнопке атрибут type, чтобы ваша форма отправлялась при нажатии.
<button type = "submit" id = "sub">Save</button>
Демо
$(function() {
$("#myForm").submit(function(e) {
// Prevent the normal form submission event
e.preventDefault();
console.info('onsubmit event handler triggered');
// Create an object of the form
var form = $(this);
// Make an AJAX request
/*$.post(this.action, form.serializeArray(), function(info) {
// Clear the form
form[0].reset();
// Display message
$("#result").html(info);
});*/
// fake AJAX request
setTimeout(function(){
// Clear the form
form[0].reset();
// Display message
$("#result").html('Successfully Inserted');
}, 3000);
});
});<form id = "myForm" action = "userInfo.php" method = "post">
Name: <input type = "text" name = "name" /><br /> Age : <input type = "text" name = "age" /><br />
<button type = "submit" id = "sub">Save</button>
</form>
<span id = "result"></span>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>Благодарность!! но меня это не держит на странице, постоянно меняется :(
прости Майки, я плохой программист, но это не работает. Я меняю свой код в вопросе, вы его видите? спасибо за помощь
@Vidal Откройте свой инструменты разработчика браузера, проверьте консоль и посмотрите, есть ли у вас ошибки. Вы должны использовать только сценарий jQuery один, и он должен быть помещен в ваш сценарий перед.
хорошо. Моя консоль говорит, что у меня проблема: GET http://localhost/PracticaAjax/script/elscript.js net::ERR_ABORTED это важно?
@ Видаль Конечно. Это означает, что он не может найти ваш сценарий. Вставьте URL-адрес в свой браузер и посмотрите, загрузится ли он. Если не может, выясните, почему это, например, неправильное имя файла, неправильное расположение и т. д.
не беда, оставляю, ищу другое, спасибо :)
В ajax вы публикуете форму с ее действием, поэтому она будет перенаправлена, подтвердите Если вы не хотите перенаправлять, отправьте запрос ajax следующим образом
$.ajax({
method:post,
url:"File name you want to send request"
}).done(function(response){
});
mysql_ давно мертв, используйте mysqli_ - или лучше PDO. И узнайте про SQL-инъекция и подготовленные заявления.