我正在尝试做一个update
而不必刷新页面。但我正在努力学习和理解如何使用AJAX
. 目前我这样做了,它不起作用,我不知道如何完成它。
测试.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>
更新.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” 创建主动检查,这不应该进行,因为每个标签的 id 都是唯一的,HTML 5 规则
2)
keyup()
JQuery的事件用于监听键盘释放键。(建议使用click()
更改为:3) 更改 JQuery 事件选择器以使用类类型侦听所有资产:
为。。改变:
4)将逗号放在块的末尾
})
为。。改变:
5) 建议将库的加载放在要执行的代码之前,以便可以解释指令序列。
6)要更新记录,需要放置一个记录标识符,标识该物品属于谁,可以放置在标签中的自定义属性中。示例:idp
7)文件中没有正确传递更新idp 值,因此 SQL 无法知道要更新到哪条记录。
$code = $_GET['@'];
现在
$code = $_GET['idp'];
8) update.php 文件中执行更新时必须发送响应,该响应可以作为回显输出,稍后将被 AJAX 读取。
回声“活动 idp”。$代码;
9)这段代码没有用,因为该方法用于
val()
从输入标签而不是从跨度中获取值,它没有将参数正确传递给 AJAX。10)post方法将用于通过AJAX传递数据,更安全,将来可以发送更多信息。
11) Ajax 将要发送的数据如下:
12)标签“.salida”不存在显示你必须创建它的代码的结果。
13) 删除这个库负载并使用谷歌的 JQuery CDN。(它不完整,不运行 AJAX)
改成这样:
14) 更改update.php文件中接收数据的方法
对于这个其他
15)在文件中注释成功连接的回显语法:connet.php
// echo "连接成功";
代码解释已经使用 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 以便您可以取消注释并将来自服务器的每个响应视为变量。只需在我离开你的时候创建数据库,然后复制和粘贴。
正如我之前提到的,这个想法是查看您要更新的信息,因为它没有意义。该示例包括显示现有信息、打印以进行编辑以及在发送时进行更新。任何问题我都很细心 broda :) 创建数据库。使用mysql!!并准备好。
BD: champions
TABLA: equipo
HTML:播放器视图.html
JQ/AJAX:players.js
PHP QUERIES 请求并发送到后端的数据。
连接到数据库:bd.php
PHP:players.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