Обратите внимание, что в этом ответе используется нотация jQuery, поэтому вам необходимо включить библиотеку jQuery в ваше приложение, чтобы этот пример работал:
<script src="/js/jquery.min.js" type="text/javascript"></script>
Поскольку у вас есть HTML и PHP в отдельных файлах, вы можете использовать AJAX для вывода HTML в элементе, который вы так желаете на своей HTML-странице.
Пример jQuery AJAX:
<script>
function submitMyForm() {
$.ajax({
type: 'POST',
url: '/your_page.php',
data: $('#yourFormId').serialize(),
success: function (html) {
//do something on success?
$('#outPut').html(html);
var bingoValue=4;
if( $('#outPut').text().indexOf(''+bingoValue) > 0){
alert('bingo!');
}
else {
alert('No!');
}
}
});
}
</script>
Обратите внимание, что я инкапсулировал функцию AJAX в другую функцию, которую можно выбрать для вызова, например, onclick для кнопки.
<button id="mySubmitButton" onclick="submitMyForm();">Submit form!</button>
Пошаговая инструкция:
То, что мы делаем в нашей функции AJAX, - это то, что мы объявляем наш тип данных, как вы это делаете с элементом формы.В вашем PHP-файле я заметил, что вы использовали метод POST, поэтому я включил его и в функцию AJAX.
Далее мы объявляем наш URL-адрес, по которому будут отправляться данные.Это та же страница, на которую ваша текущая форма отправляет данные, и это ваша страница PHP.
Затем мы объявляем наши данные.Теперь есть разные способы сделать это.Я предполагаю, что вы в настоящее время используете форму для POST ваших данных на вашей странице PHP, поэтому я подумал, что мы могли бы также использовать эту форму сейчас, когда она у вас есть.Что мы делаем, так это то, что мы сериализуем данные внутри вашей формы как наши POST значения, как вы делаете это при обычной отправке формы.Другой способ сделать это - объявить отдельные переменные в качестве POST переменных.
Пример отдельных переменных:
$.ajax({
type: 'POST',
url: '/your_page.php',
data: {
myVariable : data,
anotherVariable : moreData
//etc.
},
success: function (html) {
//do something on success?
$('#outPut').html(html);
}
});
Буквальный пример переменной для разбора: myVariable : $('input#bookId').val().
Оператор : в нашей функции AJAX в этом случае в основном равен =, поэтому мы устанавливаем нашу переменную равной тому, что мы хотим.В буквальном примере myVariable будет содержать значение поля ввода с id bookId .Вы можете сделать таргетинг любым селектором, который захотите, и можете посмотреть это.Я просто использовал это в качестве примера.
В функции успеха функции AJAX вы можете сделать что-то в случае успеха.Здесь вы можете вставить HTML-код, который вы хотите вывести со своей PHP-страницы, в другой элемент (например, в div).В моем примере AJAX я выводю html со страницы PHP в элемент, который содержит id outPut .
Мы также записываем условие в нашем success функция (на основе комментариев к этому ответу), где мы проверяем конкретное значение подстроки в элементе div.Это значение подстроки определяется через переменную bingoValue .В моем примере я установил это значение равным 4, поэтому всякий раз, когда "4" существует внутри элемента div, он входит в условие.
Пример:
<div id="outPut"></div>
Если вы воспользуетесь этим примером, то любой элемент HTML, который вы структурируете в своем файле PHP, используя значения PHP в своем файле PHP, будет вставлен в элемент div.
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("127.0.0.1", "root", "", "mysql3");
// Check connection
if($link === false) {
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$user_id =$_POST['user_id'];
$book_id =$_POST['book_id'];
$game_id =$_POST['game_id'];
$site_id =$_POST['site_id'];
//Attempt insert query execution
$query = "SELECT site_id FROM components WHERE user_id='$user_id' && book_id='$book_id' && game_id='$game_id' ORDER BY site_id DESC LIMIT 1";
$res = mysqli_query($link,$query);
$result = array();
$res = mysqli_query($link,$query) or die(mysqli_error($link));
while($row = mysqli_fetch_assoc($res)){
$result=$row['site_id'];
echo $result.' ';
}
// Close connection
mysqli_close($link);
?>
Ваша форма также больше не нуждается в действии , определенном как все, что теперь выполняется с помощью функции AJAX.
Итак, измените:
<form name="LoadGame" id="LoadGame" method="post" action="http://127.0.0.1/PHP/mine1.php" enctype="multipart/form-data">
to:
<form name="LoadGame" id="LoadGame" method="post" enctype="multipart/form-data">
И убедитесь, что ваша кнопка: <button id="mySubmitButton" onclick="submitMyForm();">Submit form!</button> находится за пределами тега формы, поскольку кнопки без определенного атрибута type будут иметь type = "submit" по умолчанию внутри тега формы.
Если вам нужно что-то доработать, дайте мне знать.:)