Я пытаюсь сделать update
без обновления страницы. Но я пытаюсь научиться и понять, как использовать AJAX
. На данный момент я сделал это, это не работает, и я не знаю, как это закончить.
файл test.php
<script src="https://kit.fontawesome.com/cbec68f37d.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#change").keyup(function(){
var parametros="change="+$(this).val()
$.ajax({
data: parametros,
url: 'update.php',
type: 'GET',
beforeSend: function () {},
success: function (response) {
$(".salida").html(response);
},
error:function(){
alert("error")
}
});
})
})
</script>
<div class="container w-75 p-5">
<h3 class="mb-4">Activar y desactivar</h3>
<?php
$list = $conn->query("SELECT * FROM proyectos");
while ($fila = $list->fetch()) {
if($fila['pestado'] == '0') {
?>
<p>
Activo <span class="text-primary" id="change"><a href="#"><i class="fas fa-toggle-on"></i></a></span>
</p>
<?php } else { ?>
<p>
Inactivo <span class="text-muted"><i class="fas fa-toggle-off"></i></span>
</p>
<?php } } ?>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
файл update.php
<?php
require_once 'connect.php';
$code = $_GET['@'];
$sql = "UPDATE proyectos SET pestado = '1' WHERE idp = '".$code."'";
$stmt = $conn->prepare($sql);
$stmt->execute();
//echo 'Bien!';
?>
Вдобавок Activo <span class="text-primary" id="change"><a href="#"><i class="fas fa-toggle-on"></i></a></span>
, id="change"
и я знаю, что чего-то не хватает, что бы войти в href="#"
, но я не знаю, что это из-за недостатка знаний.
Я хотел бы, чтобы вы помогли мне понять, как это использовать, потому что я этого не понимаю, я имею в виду, что я не знаю, как это работает, AJAX
хотя Jquery
моя идея состоит в том, чтобы использовать только JavaScript
.
Заранее спасибо.
Здесь у меня есть подробное объяснение упражнения и поставленной задачи.
Сначала я собираюсь начать с исправлений, чтобы узнать причину, по которой это не работает:
1) Создаются активные чеки с идентификатором id="change", чего делать не следует, так как идентификатор уникален для каждого тега, правило HTML 5
2) Событие
keyup()
для JQuery используется для прослушивания клавиатуры, чтобы отпустить клавишу. (рекомендуется использоватьclick()
Изменить на:3) Измените селектор событий JQuery, чтобы прослушивать все активы, используя тип класса:
Изменить для:
4) Поставьте запятую в конце блоков
})
Изменить для:
5) Рекомендуется размещать загрузку библиотек перед исполняемым кодом, чтобы можно было интерпретировать последовательность инструкций.
6) Чтобы обновить запись, вам необходимо разместить идентификатор записи, который идентифицирует, кому принадлежит элемент, который можно поместить в настраиваемый атрибут на этикетке. Пример: идп
7) Значение update idp передается в файл неправильно , поэтому SQL не может знать, до какой записи обновлять.
$код = $_GET['@'];
В настоящее время
$code = $_GET['idp'];
8) При выполнении обновления в файле update.php должен быть отправлен ответ, этот ответ можно использовать как эхо-вывод, который позже будет прочитан AJAX.
echo 'Активный idp' . $код;
9) Этот код бесполезен, потому что метод используется
val()
для получения значения из входного тега, а не из диапазона, он неправильно передает параметры в AJAX.10) Метод post будет использоваться для передачи данных через AJAX, это безопаснее, и в будущем можно будет отправить больше информации.
11) Данные, которые будут отправлены Ajax, следующие:
12) Тег «.salida» не существует, чтобы показать результат кода, который вы должны создать.
13) Удалите эту полезную нагрузку библиотеки и используйте Google JQuery CDN. (он неполный и не запускает AJAX)
Измените на это:
14) Изменить метод получения данных в файле update.php
для этого другого
15) Синтаксис эхо-комментария для успешного соединения в файле: connet.php
// эхо "Подключение успешно";
ОБЪЯСНЕНИЕ КОДА УЖЕ РАБОТАЕТ С AJAX:
1) ARCHIVO: connect.php
Se creo una conexión a la base de datos a través de método PDO que es orientado a objetos.
Se declara los valores en la variables de conexión respectiva.
Se usa el
try { } catch
para captura el error de conexión en caso de falla.La conexion se establece creando una instancia del objeto PDO con el nombre de $conn.
Se configura los parametros del modo expecion de errores
2) ARCHIVO: update.php
Este archive es una simple rutina para actualizar registros.
Aquí se carga la conexión solamente una vez
Se recibe el valor del nombre de variable “idp” a travez de un método POST.
Hacemos la sintaxis de actualización del registro y se pasa el valor de idp para buscar el registro especifico y se ponde el valor del campo pestado = 1
Preparamos la conexión para ejecutar el comando SQL y se procede a su ejecución.
Enviamos una respuesta en pantalla por hacer actualizado el registro la cual consiste en “Activo “+ numero del idp
EXPLICACION DEL CODIGO:
3) ARCHIVO: actualizar.php
Se cargan las librerías al principio para poder ejecutar sus instrucciones.
Con esta instrucción obliga a terminar la carga de la pagina se para ejecutar el codigo jquery o javascript
Se escucha el evento del click botón derecho del mouse para la clase .chanse
Capturamos el valor del atributo correspondiente con la etiqueta que tiene la clase “change” la cual es el
Construimos la estrutura para pasar los datos mediante AJAX el cual usa la sintaxis:
Aquí el nombre de la variable será idp y su valor será obtenido por la variable idp que recibió el valor del atributo con el mismo nombre.
2) Para cambiar el estado del botón cambiamos su atributo mediante la remoción de la clase y luego la colocación de una nueva clase. En este caso el botón es el nieto de la etiqueta por eso se hace dos niveles de children().
3) Ahora ejecutamos el codigo AJAX: pasando los parámetros correspondientes:
Data: (son los datos que recibirá el otro archivo para trabajar)
url: (es la ruta y nombre del archivo)
type: Se usa el método POST por ser mas seguro y practico.
beforeSend: function () {}
Esta funcion se ejecuta antes de realizar la petición de AJAX, es util para aviso para el usuario o validaciones.
success: function (response) {}
Aquí se ha ejecutado satisfactoriamente el AJAX y se recibe la respuesta del archivo a través de la variable responde, en este caso será recibido 'Activo idp'.
Mostrarmos el contenido de la salida a la etiqueta con clase “salida”
Se usa para borrar el contenido de la etiqueta de clase “salida” despues de 2000 ms
En caso de fallo en la comunicación con AJAX se ejecuta este bloque de codigo.
CUERPO DEL ARCHIVO
Se carga una sola vez la conexión.
Se hace la consulta de SQL para todos los registros.
Usamos el while para hacer un recorrido de todos los registro uno a uno, tomando los datos a través de la variable $fila.
Aquí se ha agregado un atributo propio llamado idp el cual va a contener el id que corresponde con ese registro y sirve para referenciarlo cuando se realice el evento del click.
En caso de que pestado tenga otro valor coloca el estado del botón en Inactivo.
Salida que será llevada con el reporte de AJAX
AJUNTO LOS ARCHIVOS:
Archivo connect.php
///////////////////////////////////////////////////////////////////////////// Archivo update.php
/////////////////////////////////////////////////////////////////// Archivo actualizar.php
Imagenes de pantallas Ejecutando el programa:
Imagen de la Tabla de base de datos:
Imagen despues de Correr el Programa:
Resultado y Cambio en la Tabla:
Estrutura de la tabla con la cual se probo el codigo:
Я надеюсь быть полезным
Этот пример является функциональным. Я комментирую каждый шаг и оставляю console.log, чтобы вы могли раскомментировать и увидеть каждый ответ сервера как переменную. Просто создайте базу данных, как я вам написал, затем скопируйте и вставьте.
Как я упоминал ранее, идея состоит в том, чтобы увидеть информацию, которую вы собираетесь обновлять, поскольку это не имеет смысла. Пример состоит из отображения существующей информации, ее печати для редактирования и обновления при отправке. Любые вопросы я внимателен бродя :) Создаю базу. Используйте mysql!! и готов.
BD: champions
TABLA: equipo
HTML: playerview.html
JQ/AJAX: player.js
PHP-ЗАПРОСЫ Данные, которые были запрошены и отправлены на серверную часть.
ПОДКЛЮЧЕНИЕ К БД:bd.php
PHP: player.php (обзор существующих данных)
PHP: queryUpdate.php (отображает данные во входных данных)
PHP: update.php (обновляет данные после отправки)
CSS: стиль.css
Parece que quieres una explicacion o flujo de como hacerlo, entoces mira, lo que puedes hacer es obtener el nodo donde fue clickeado, ¿para qué? lo modificaras antes de hacer la peticion o despues de ella, necesitas dicho nodo para unicamente modificar este.
.span
puede seth
,div
o al que le ponesclase
a todos tus registro eid
para que las pierdas al recorrer la lista.si desdea modificar despues de la funcion
puedes mandar mas para
esta es respuesta del servidor, si no tienes, puedes no ponerlo
quiza lo necesitas para una notificacion
JQuery
se ejecuta la peticion internamente, asi nunca se actulizaráo mejor puedes usar esta libreria