Обновить содержимое страницы, без зарядить его
работаю над проектом для колледжа, где я хотел бы обновить содержимое страницы, без перезагрузить его. Страница, на вопрос его содержания, полученного сценария PHP, что в свою очередь забирает содержимое в базе данных MySQL.
это мой сценарий PHP:
<?php
include "php/conn.php";
function lerNotas() {
global $conn;
$query = mysqli_query($conn, "SELECT * FROM notas");
if (!$query) {
die('A consulta falhou:' . mysqli_error($conn));
} else {
while($linha = mysqli_fetch_assoc($query)) {
echo "<div class=\"nota\">";
echo "<input type=\"checkbox\" name=\"ids[]\" value=\"" . $linha['id'] . "\"><br>";
echo "<span class=\"titulo\">". $linha['titulo'] . "</span><br>";
echo nl2br($linha['conteudo']) . "<br><br>";
echo "<span class=\"textoPequeno\">Criado em " . $linha['data_criacao'] . "</span><br/>";
echo "<span class=\"textoPequeno\">Atualizado pela última vez em " . $linha['data_atualizacao'] . "</span>";
echo "</div>";
}
}
}
function apagarNotas() {
global $conn;
foreach($_POST['ids'] as $x) {
$query = mysqli_query($conn, "DELETE FROM notas WHERE id=".$x );
if (!$query) {
die('A consulta falhou:' . mysqli_error($conn));
} else {
}
}
}
?>
И это содержание моей странице:
<html>
<head>
<title>Notas</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta charset="utf8">
</head>
<body>
<nav id="menu">
<ul>
<li><a href="./nova_nota.php">Adicionar nota</a></li>
<li><a href="./ler_notas.php">Listar notas</a></li>
<li><a href="./exclui_notas.php">Excluir notas</a></li>
</ul>
</nav>
<form action="" method="post">
<?php
echo lerNotas();
?>
<input type="submit" name="apagar" value="Apagar notas selecionadas" class="buttonEnviar">
<?php
if(isset($_POST['apagar'])){
echo apagarNotas();
}
?>
</form>
</body>
</html>
обратите внимание, что форма заполняется за PHP/MySQL. То, что я хочу, что, когда я нажал на кнопка query для удаления была выполнена, и содержание веб-страницы, было обновление без обновления страницы. Мне даже удалось сделать это во времени, чтобы вставить данные в базу данных, но чтобы удалить и обновить страницу, я стучать.
Edit: Дополнить пунктом выше, так что я сделал вставки данных без перезагрузки страницы:
<html>
<head>
<title>Notas</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/novaNota.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta charset="utf8">
</head>
<body>
<nav id="menu">
<ul>
<li><a href="./nova_nota.php">Adicionar nota</a></li>
<li><a href="./ler_notas.php">Listar notas</a></li>
<li><a href="./exclui_notas.php">Excluir notas</a></li>
</ul>
</nav>
<div class="formulario">
<form id="form" name="form">
<input id="titulo" type="text" name="titulo" placeholder="Título" class="inputTexto"><br>
<textarea id="conteudo" name="conteudo" placeholder="Conteúdo" class="textarea"></textarea><br>
<input type="submit" value="Salvar nota" class="buttonEnviar" id="submit">
</form>
</div>
</body>
</html>
это страница, где есть ссылка на скрипт, который несет ответственности вставить данные в базу данные:
NovaNota.js
$(document).ready(function() {
$("#submit").click(function() {
var titulo = $("#titulo").val();
var conteudo = $("#conteudo").val();
if (titulo == '' || conteudo == '') {
alert("Nenhum campo pode ser deixado em branco!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("php/adicionarNota.php", {
titulo1: titulo,
conteudo1: conteudo
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
});
}
});
});
, Который, в свою очередь, использует этот скрипт:
AdicionarNota.php
<?php
include "conn.php";
define('NOME_TABELA', 'notas');
$titulo = $_POST['titulo1'];
$conteudo = $_POST['conteudo1'];
$data = date("Y-m-d H:i:s");
$query = mysqli_query($conn, "INSERT INTO " . NOME_TABELA . " (titulo, conteudo, data_criacao, data_atualizacao) VALUES (\"" . $titulo . "\", \"" . $conteudo . "\",\"" . $data . "\", null)");
if ($query) {
echo "Nota criada com sucesso!";
}
mysqli_close($conn);
?>
Надеюсь, что это ясно, и это помогает!
2 answers
Я не сегодня, не нужно много времени, чтобы создать код, но я думаю, что обязанность иметь знания, чтобы сделать это:
1) добавьте код для checkbox:
echo "<input type=\"checkbox\" name=\"ids[]\" value=\"" . $linha['id'] . "\" id='i:$linha['id']'>"
2) создайте событие onsubmit, как когда-то делали для записи. Перед сохраните массив из checkbox
var ch = document.getElementsByTagName("checkbox");
3) сделать функцию ajax для отправки этих данных на сервер (функция apagarNotas() в php-файл.
4) В функции php apagarNotas() создать ответ, который удалил с нотами успеха:
foreach($_POST['ids'] as $x) {
$query = mysqli_query($conn, "DELETE FROM notas WHERE id=".$x );
if (!$query) {
$control = false;
} else {
$control =true;
}
}
if(!control)
die('A consulta falhou:' . mysqli_error($conn));
return '{"result":"ok"}';
5) Если вы получили "ОК" возьмите в checbox, сохраненные в папке var ch, и удалите все элементы, которые embrulham ноты:
for (var b=0; ch.length; b++){
if(ch.checked){
c=document.getElementByID("i:"+ch).parentNode();
c.parentNode.remove(c)
}
}
Я публикую без проверки кода, но я думаю, что этот рецепт server за то, что вы хотите сделать.
Все хорошо до момента SUBMIT, который, когда используется в form, управляется очень конкретно, то есть является одним из элементов которой, как ожидается, действие "по умолчанию", и почему это происходит "перезагрузка" или, как descreves тебя...
Была выполнена, и содержание веб-страницы, было обновление без обновления страница.
Тем не менее действия, которые "захватили" click, а не действия SUBMIT... чтобы решить мое решение заключается в использовании:
event.preventDefault();
Как я уже упоминал, и, чтобы "захватить" SUBMIT ФОРМЫ, а не "click" решение:
Form добавляет ID:
<form id="exemplo">
После того, как в javascript:
$(document).ready(function() {
$("form#exemplo").submit(function() {
event.preventDefault();
[o teu código]
});
});