{"id":6324,"date":"2014-05-10T08:51:00","date_gmt":"2014-05-10T08:51:00","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6324"},"modified":"2014-12-29T20:54:01","modified_gmt":"2014-12-29T20:54:01","slug":"actualizar-variable-php-cada-x-segundos-con-jquery-ajax","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/","title":{"rendered":"Actualizar variable PHP cada x segundos con jQuery Ajax"},"content":{"rendered":"

En este art\u00edculo vamos a seguir dando pie a las tecnolog\u00edas PHP, jQuery y Ajax para conseguir efectos sorprentes y din\u00e1micos que te pueden resolver muchos de los problemas que se te puedan presentar hoy en d\u00eda a la hora de crear una p\u00e1gina Web.<\/p>\n

En el ejemplo que vamos a ilustrar simplemente vamos a ver como se actualiza una variable cada 3 segundos, teniendo en cuenta que el valor est\u00e1 registrado en una base de datos.<\/p>\n

Lo primero que necesitaremos es conectar a nuestra base de datos para recoger la variable que queremos visualizar y actualizar. La actualizaci\u00f3n que vamos a aplicar no va a ser m\u00e1s que sumarle a lo que ya hay guardado el tiempo transcurrido,\u00a0 en este caso, 3 segundos. Tan solo es un ejemplo, pero piensa en la cantidad de situaciones en las que podr\u00edamos utilizar estas lineas de c\u00f3digo.<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\ninclude<\/span>(<\/span>'..\/..\/config_mysqli.php'<\/span>)<\/span>;<\/span>\n \n$result<\/span> =<\/span> $conexion<\/span>-><\/span>query<\/span>(<\/span>"SELECT * FROM `counters` WHERE id_counter=1"<\/span>)<\/span>;<\/span>\nif<\/span> (<\/span>$result<\/span>-><\/span>num_rows<\/span> ><\/span> 0)<\/span> {<\/span>\n    $data<\/span> =<\/span> $result<\/span>-><\/span>fetch_assoc<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span>\n?><\/span><\/pre><\/div><\/div>\n
 <\/p>\n
En la primera linea lo que estamos haciendo es incluir un archivo para conectar a la base de datos. No es el objetivo de este art\u00edculo explicar como conectar a una base de datos. Pero si necesitas saber como hacerlo solo tienes que observar el siguiente art\u00edculo: Como interactuar con una base de datos MySQLi<\/a>. Seguidamente ejecutamos la query que nos devuelve un n\u00famero guardado en la base de datos que depositamos en la variable $data. Ahora solo faltar\u00eda mostrar este n\u00famero all\u00ed donde deseemos.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<span<\/span><\/a> id<\/span>=<\/span>"counter"<\/span>><?php echo $data[<\/span>'counter'<\/span>]<\/span>; ?><\/<\/span>span<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
 <\/p>\n
F\u00edjate que en el tag span le estamos a\u00f1adiendo un identificador que ser\u00e1 la clave para que se ejecute correctamente el siguiente c\u00f3digo jQuery:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\t\n    function<\/span> update(<\/span>)<\/span>{<\/span>\n        var<\/span> current =<\/span> $(<\/span>'#counter'<\/span>)<\/span>.text<\/span>(<\/span>)<\/span>;<\/span>\n        var<\/span> sum =<\/span> Number(<\/span>current)<\/span> +<\/span> 3<\/span>;<\/span>\n        var<\/span> dataString =<\/span> 'sum='<\/span>+<\/span>sum;<\/span>\n \n        $.ajax<\/span>(<\/span>{<\/span>\n            type:<\/span> "POST"<\/span>,<\/span>\n            url:<\/span> "sum.php"<\/span>,<\/span>\n            data:<\/span> dataString,<\/span>\n            success:<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n                $(<\/span>'#counter'<\/span>)<\/span>.text<\/span>(<\/span>sum)<\/span>;<\/span>\n            }<\/span>\n        }<\/span>)<\/span>;<\/span>\n    }<\/span>\n \n    setInterval(<\/span>update,<\/span> 3000)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
 <\/p>\n
En este caso, hemos creado una funci\u00f3n que llamamos update() que se ejecuta cada 3 segundos. Dentro de esta funci\u00f3n estamos recogiendo el texto que hay dentro del elemento identificado con id=\u00bbcounter\u00bb, hacemos una suma y generamos un string que pasaremos mediante el m\u00e9todo POST al archivo PHP v\u00eda AJAX.<\/p>\n
F\u00edjate que en el success del Ajax, es decir, una vez ya ejecutado el archivo sum.php estamos depositando en el elemento con identificador id=\u00bbcounter\u00bb el valor de la nueva suma.<\/p>\n
Hemos hecho la suma en el mismo jQuery pero se podr\u00eda hacer tambi\u00e9n en el PHP.<\/p>\n
Nuestro archivo PHP lo hemos nombrado como sum.php y contiene lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\ninclude<\/span>(<\/span>'..\/..\/config_mysqli.php'<\/span>)<\/span>;<\/span>\n$sum<\/span> =<\/span> $_POST<\/span>[<\/span>'sum'<\/span>]<\/span>;<\/span>\n$update<\/span> =<\/span> "UPDATE counters SET counter = "<\/span>.<\/span>$sum<\/span>.<\/span>" WHERE id_counter = 1"<\/span>;<\/span>\n$conexion<\/span>-><\/span>query<\/span>(<\/span>$update<\/span>)<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
 <\/p>\n
En este archivo estamos volviendo a conectar con la base de datos, capturamos mediante POST el valor de la suma y realizamos la query de actualizaci\u00f3n. Es importante saber que para ejecutar el c\u00f3digo anterior, vuestra p\u00e1gina disponga de la librer\u00eda jQuery, deber\u00e1 incluirlo en su p\u00e1gina si no lo tiene, como por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script<\/span><\/a> src<\/span>=<\/span>"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En este art\u00edculo vamos a seguir dando pie a las tecnolog\u00edas PHP, jQuery y Ajax para conseguir efectos sorprentes y din\u00e1micos que te pueden resolver muchos de los problemas que se te puedan presentar hoy en d\u00eda a la hora de crear una p\u00e1gina Web. En el ejemplo que vamos a ilustrar simplemente vamos a […]<\/p>\n","protected":false},"author":1,"featured_media":4519,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,5],"tags":[167],"class_list":["post-6324","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-jquery","tag-eventos"],"yoast_head":"\nActualizar variable PHP cada x segundos con jQuery Ajax - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Actualizar variable PHP cada x segundos con jQuery Ajax - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a seguir dando pie a las tecnolog\u00edas PHP, jQuery y Ajax para conseguir efectos sorprentes y din\u00e1micos que te pueden resolver muchos de los problemas que se te puedan presentar hoy en d\u00eda a la hora de crear una p\u00e1gina Web. En el ejemplo que vamos a ilustrar simplemente vamos a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-10T08:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-29T20:54:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/ajax-php.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"190\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/\",\"name\":\"Actualizar variable PHP cada x segundos con jQuery Ajax - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/ajax-php.jpg\",\"datePublished\":\"2014-05-10T08:51:00+00:00\",\"dateModified\":\"2014-12-29T20:54:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/ajax-php.jpg\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/ajax-php.jpg\",\"width\":190,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Actualizar variable PHP cada x segundos con jQuery Ajax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Actualizar variable PHP cada x segundos con jQuery Ajax - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Actualizar variable PHP cada x segundos con jQuery Ajax - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a seguir dando pie a las tecnolog\u00edas PHP, jQuery y Ajax para conseguir efectos sorprentes y din\u00e1micos que te pueden resolver muchos de los problemas que se te puedan presentar hoy en d\u00eda a la hora de crear una p\u00e1gina Web. En el ejemplo que vamos a ilustrar simplemente vamos a […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2014-05-10T08:51:00+00:00","article_modified_time":"2014-12-29T20:54:01+00:00","og_image":[{"width":190,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/ajax-php.jpg","type":"image\/jpeg"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/","url":"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/","name":"Actualizar variable PHP cada x segundos con jQuery Ajax - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/ajax-php.jpg","datePublished":"2014-05-10T08:51:00+00:00","dateModified":"2014-12-29T20:54:01+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/ajax-php.jpg","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/ajax-php.jpg","width":190,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/actualizar-variable-php-cada-x-segundos-con-jquery-ajax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Actualizar variable PHP cada x segundos con jQuery Ajax"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6324"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6324\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4519"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}