Передача данных в PHP из Jquery с использованием ajax без обновления
Я уже задавал подобный вопрос, но не смог получить достаточно информации. Я попытался сократить код до того, что мне нужно, чтобы это работало.
Я пытаюсь передать php-код переменной заголовка и хочу, чтобы php-код сообщал мне об успешном завершении работы. Я хотел сделать это без обновления страницы.
Когда я запустил этот код без бита ajax, он позволил бы мне нажать кнопку, и он выполнит проверки без обновления. Но как только я вставлю код ajax, он не будет проверять проверки и обновится. Он также не запускает никаких проверок в коде php.
Я неправильно использую код ajax? Как я могу получить это, чтобы отправить данные в файл php без обновления и отправить мне сообщение об успехе?
РЕДАКТИРОВАТЬ: я добавил в скобки вокруг данных, отправляемых в файл php. Теперь проверка «заполните форму» работает. Но когда форма заполнена, проверка успеха не возвращается из файла php.
EDIT2: я вставил .val () в оператор инициализации и удалил .val () из оператора if. Я удалил атрибут onclick с кнопки. И обновил данные в JS до «data: {title1: title}». Пока что статус остается прежним.
EDIT3: я добавил «dataType: JSON», а также некоторые коды ошибок / успеха. Спасибо, Рон, за помощь в этом. Теперь, когда я отправляю, я получаю xhr статус 500 с пустым текстом ответа. Я искал решение, но пока ничего.
EDIT4: я изменил title1 на title, чтобы больше не было путаницы в этом. Теперь работает правильно! Спасибо Рон за вашу помощь.
<?php
//getting values from JS
$title = $_POST['title'];
if(!$title == "")
{
$res="Data received successfully:";
echo json_encode($res);
}
else {
$error="Not received,some problem occurred.";
echo json_encode($error);
}
?><!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Insert</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#form').submit(function (e) {
e.preventDefault();
//debug
var x = document.getElementById("msg");
var title = $('#title').val();
var year = $('#year').val();
var director = $('#director').val();
var genre = $('#genre').val();
var runtime = $('#runtime').val();
if( title=="" || year=="" || director=="" || genre=="" || runtime=="" ) {
x.style.color = "red";
x.innerHTML = "Please fill out all of the blanks.";
} else {
//is the value being sent correct?
x.style.color = "lightGreen";
x.innerHTML = "Title is: "+title+
"<br>Year is: "+year+
"<br>Director is: "+director+
"<br>Genre is: "+genre+
"<br>Runtime is: "+runtime;
$.ajax({
type: "POST",
url: "insert_DVD.php",
data: {
title: title,
year: year,
director: director,
genre: genre,
runtime: runtime,
},
dataType: "JSON",
error: function(xhr, ajaxOptions, thrownError, data) {
alert(xhr.status);
alert(thrownError);
alert(xhr.responseText);
console.log(data);
},
success: function(data) {
console.log(data);
}
});
return false;
}
});
});
</script>
<link rel="stylesheet" href="webpage.css">
</head>
<body class="subStyle">
<div class="topnav">
<a href="#">Home</a>
<a href="#">Database</a>
<a class="active" href="#">Insert</a>
</div>
<form id="form" method="post">
If there is more than one director, separate with comma.
<table border=0>
<tr>
<th>Movie Title</th>
<th>Year Made</th>
<th>Director</th>
<th>Genre</th>
<th>Runtime(Minutes)</th>
</tr>
<tr>
<td><input type=text name="title" id="title" maxlength=100 size=30></td>
<td><input type=text name="year" id="year" maxlength=4 size=10></td>
<td><input type=text name="director" id="director" maxlength=100 size=30></td>
<td><input type=text name="genre" id="genre" maxlength=20 size=20></td>
<td><input type=text name="runtime" id="runtime" maxlength=4 size=20></td>
</tr>
<tr><td>
<button type="submit" id="update" value="send">Update Database</button></td></tr>
</table>
</form>
<p id="msg">Click the update button.</p>
</body>
</html>Решение
Я не на своем компьютере разработчика, так что я не могу на самом деле проверить php, но у вас есть две ошибки javascript, одна из которых может быть причиной проблемы.
Не вызывает вашу проблему, но вызывает ошибку в консоли.
1) Удалите функцию passData () из клика. Это не нужно, так как вы наблюдаете за отправкой формы уже с .submit.
Может быть причиной вашей проблемы
2) Когда вы определяете «title1», вы не получаете его значение, что приведет к ошибке HTMLFormElement.toString при отправке формы в настоящее время. Вместо этого продолжайте и получите значение при определении заголовка 1 через:
$('#title').val();
а затем удалите title1.val () из оператора if, где вы проверяете, заполнен ли он, и вместо этого просто поместите title1 == «»
Прямо сейчас вы отправляете элемент HTML через этот вызов ajax, что приведет к сбою jquery. Укажите другой способ отправки:
data: {title: (HTML ELEMENT)}
Дайте мне знать, если это исправит это или нет. Если это не так, я проверю это, когда доберусь до места, где я могу запустить PHP.
РЕДАКТИРОВАТЬКроме того, как указывалось в одном из комментариев, вам нужно изменить свой PHP на $ _POST [‘title’], чтобы он соответствовал тому, что вы отправляете. Вы можете проверить, что происходит на стороне php, повторив некоторые ошибки. Прошло очень много времени с тех пор, как я сделал любой php, но я обычно делал что-то вроде:
error_reporting(E_ALL & ~E_DEPRECATED);
ini_set('display_errors', 1);
В верхней части моих сценариев во время работы над ними, чтобы их отладить. Это передаст ошибку из php обратно в ответ Ajax, если он есть. Это было в PHP 5 дней, хотя.
EDIT2: Вот как я заставил это работать
test.php
<?php
//getting values from JS
$title = $_POST['title'];
if(!$title == "") {
$res="Data received su ccessfully:";
echo json_encode($res);
} else {
$error="Not received,some problem occurred.";
echo json_encode($error);
}
?>
index.html только часть ajax:
$(document).ready(function() {
$('#form').submit(function(e) {
e.preventDefault();
//debug
var x = document.getElementById("msg");
var title1 = $('#title').val();
if (title1 == "") {
x.style.color = "red";
x.innerHTML = "Please fill out all of the blanks.";
} else {
$.ajax({
type: "POST",
url: "test.php",
data: {
title: title1
},
dataType: "JSON",
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
alert(xhr.responseText);
},
success: function(data) {
console.log(data);
}
});
return false;
}
});
});
К сожалению, сейчас у меня нет времени, чтобы объяснить, что изменилось, но я вернусь к этому завтра! (С надеждой 🙂
Кроме того, я не поместил сообщение об успехе в HTML, я забыл, и вместо этого я console.logging ответ, который вы можете увидеть в консоли браузера. Извините, я хотел бы иметь больше времени сегодня вечером, чтобы ответить.
Другие решения
Может быть, это должен быть объект
data: {title1:title1}