{"id":16072,"date":"2025-03-15T00:24:50","date_gmt":"2025-03-14T22:24:50","guid":{"rendered":"https:\/\/www.beseit.net\/?p=16072"},"modified":"2025-03-15T10:51:22","modified_gmt":"2025-03-15T08:51:22","slug":"ajax-pot-acceptar-mes-duna-entrada","status":"publish","type":"post","link":"http:\/\/www.beseit.net\/?p=16072","title":{"rendered":"AJAX pot acceptar m\u00e9s d’una entrada"},"content":{"rendered":"\n

Modificaci\u00f3 de l’AJAX per passar m\u00e9s par\u00e0metres Afegirem bd<\/code> i taula<\/code> als dades enviades<\/strong> a PHP.<\/h2>\n\n\n\n
$(document).ready(function () {\n    \/\/ Quan el DOM estigui completament carregat, s'executa aquesta funci\u00f3.\n    $(\"#cercar\").on(\"keyup\", function () {\n        \/\/ Associem un esdeveniment 'keyup' al camp de text amb ID 'cercar'.\n        var paraula = $(this).val(); \/\/ Obtenim el valor actual del camp de text.\n        var bd = \"nom_de_la_base_de_dades\";  \/\/ Nom de la base de dades (pot ser din\u00e0mic).\n        var taula = \"nom_de_la_taula\";      \/\/ Nom de la taula (pot ser din\u00e0mic).\n\n        console.log(\"Tecla premuda: \" + paraula); \/\/ Mostrem el valor a la consola per depuraci\u00f3.\n\n        if (paraula.length > 0) {\n            \/\/ Si hi ha text al camp de cerca (longitud major que 0), fem una crida AJAX.\n            $.ajax({\n                url: \"cercar.php\", \/\/ URL del script del servidor que processar\u00e0 la sol\u00b7licitud.\n                type: \"POST\", \/\/ M\u00e8tode HTTP utilitzat per enviar les dades.\n                data: { \n                    cercar: paraula, \/\/ Paraula buscada.\n                    bd: bd,          \/\/ Nom de la base de dades.\n                    taula: taula     \/\/ Nom de la taula.\n                },\n                success: function (resposta) {\n                    \/\/ Funci\u00f3 que s'executa si la crida AJAX t\u00e9 \u00e8xit.\n                    console.log(\"Resposta AJAX rebuda\"); \/\/ Missatge de depuraci\u00f3.\n                    var resultats = JSON.parse(resposta); \/\/ Convertim la resposta JSON a un array JavaScript.\n                    var htmlResultats = resultats.map(function (item) {\n                        \/\/ Creem elements HTML (<li>) per a cada resultat.\n                        return \"<li class='resultat'>\" + item + \"<\/li>\";\n                    }).join(\"\"); \/\/ Unim els elements en una cadena HTML.\n                    $(\"#resultats_autocompletar\").html(htmlResultats); \/\/ Inserim els resultats al contenidor.\n                },\n                error: function () {\n                    \/\/ Funci\u00f3 que s'executa si hi ha un error en la crida AJAX.\n                    console.error(\"Error en la crida AJAX.\"); \/\/ Missatge d'error a la consola.\n                }\n            });\n        } else {\n            \/\/ Si el camp de cerca est\u00e0 buit, esborrem els resultats previs.\n            $(\"#resultats_autocompletar\").html(\"\");\n        }\n    });\n\n    \/\/ Afegim un esdeveniment de clic per als elements de la llista de resultats.\n    $(document).on(\"click\", \".resultat\", function () {\n        var paraulaSeleccionada = $(this).text(); \/\/ Obtenim el text de l'element clicat.\n        console.log(\"Paraula seleccionada: \" + paraulaSeleccionada); \/\/ Mostrem el text a la consola.\n        $(\"#cercar\").val(paraulaSeleccionada); \/\/ Col\u00b7loquem el text seleccionat al camp de cerca.\n    });\n});<\/code><\/pre>\n\n\n\n
\n\n\n\n
cercar.php<\/h2>\n\n\n\n
<?php\nheader('Content-Type: application\/json'); \/\/ Indiquem que la resposta ser\u00e0 en format JSON.\nsession_start(); \/\/ Iniciem la sessi\u00f3 (si \u00e9s necessari per altres funcions).\n\nif (isset($_POST['cercar'], $_POST['bd'], $_POST['taula'])) {\n    \/\/ Comprovem que s'hagin rebut tots els par\u00e0metres necessaris.\n    $cercar = $_POST['cercar']; \/\/ Text introdu\u00eft per l'usuari.\n    $bd = $_POST['bd'];         \/\/ Nom de la base de dades.\n    $taula = $_POST['taula'];   \/\/ Nom de la taula.\n\n    \/\/ Conexi\u00f3 a la base de dades (ajusta les credencials segons el teu entorn).\n    $conn = new mysqli(\"localhost\", \"usuari\", \"contrasenya\", $bd);\n\n    if ($conn->connect_error) {\n        \/\/ Si hi ha un error de connexi\u00f3, retornem un missatge d'error en format JSON.\n        die(json_encode([\"error\" => \"Error de connexi\u00f3: \" . $conn->connect_error]));\n    }\n\n    \/\/ Evitem injeccions SQL utilitzant prepared statements.\n    $stmt = $conn->prepare(\"SELECT camp FROM $taula WHERE camp LIKE ?\"); \/\/ Consulta SQL.\n    $cercar = \"%$cercar%\";  \/\/ Cerca parcial (exemple: '%text%').\n    $stmt->bind_param(\"s\", $cercar); \/\/ Lliguem el par\u00e0metre de cerca.\n    $stmt->execute(); \/\/ Executem la consulta.\n    $result = $stmt->get_result(); \/\/ Obtenim el resultat.\n\n    $resultats = []; \/\/ Array per emmagatzemar els resultats.\n    while ($row = $result->fetch_assoc()) {\n        \/\/ Recorrem els resultats i afegim cada valor al array.\n        $resultats[] = $row['camp'];\n    }\n\n    echo json_encode($resultats); \/\/ Retornem els resultats en format JSON.\n\n    $stmt->close(); \/\/ Tanquem la sent\u00e8ncia preparada.\n    $conn->close(); \/\/ Tanquem la connexi\u00f3 a la base de dades.\n} else {\n    \/\/ Si falten par\u00e0metres, retornem un missatge d'error en format JSON.\n    echo json_encode([\"error\" => \"Falten par\u00e0metres\"]);\n}\n?><\/code><\/pre>\n\n\n\n
\n\n\n\n
Qu\u00e8 hem fet?<\/strong><\/h3>\n\n\n\n
    \n
  1. Passar $cercar<\/code>, $bd<\/code> i $taula<\/code> des d’AJAX<\/strong> a cercar.php<\/code>.<\/li>\n\n\n\n
  2. Utilitzar $bd<\/code> i $taula<\/code> a la consulta SQL<\/strong> perqu\u00e8 la cerca sigui m\u00e9s flexible.<\/li>\n\n\n\n
  3. Afegir seguretat amb mysqli_prepare<\/code><\/strong> per evitar SQL Injection.<\/li>\n\n\n\n
  4. Enviar la resposta com JSON<\/strong>, que AJAX pot interpretar f\u00e0cilment.<\/li>\n<\/ol>\n\n\n\n
    \n","protected":false},"excerpt":{"rendered":"
    Modificaci\u00f3 de l’AJAX per passar m\u00e9s par\u00e0metres Afegirem bd i taula als dades enviades a PHP. cercar.php Qu\u00e8 hem fet?<\/p>\n","protected":false},"author":2,"featured_media":8179,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-16072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bloc-de-notes"],"_links":{"self":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16072"}],"version-history":[{"count":7,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16072\/revisions"}],"predecessor-version":[{"id":16086,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16072\/revisions\/16086"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/media\/8179"}],"wp:attachment":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16072"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}