Bem, navegando pela net achei um tutorial legal sobre JSON com jQuery, PHP e MySQL.<\/p>\n
E resolvi postar…<\/p>\n
Este post mostra como preencher uma caixa de sele\u00e7\u00e3o com base no valor de outra, pela obten\u00e7\u00e3o de dados JSON com jQuery a partir de um script PHP que obt\u00e9m os dados de um banco de dados MySQL.<\/p>\n
O c\u00f3digo em HTML inicial \u00e9 assim:<\/p>\n
[code language=”html”]
\n<pre>
\n<div><form><\/div>
\nFrutas:<\/div>
\n<select name=”name” id=”fruitName”>
\n<option>Ma\u00e7\u00e3<\/option>
\n<option>Laranja<\/option
\n<option>Banana<\/option>
\n<option>Pera<\/option>
\n<\/select>
\n<\/form>
\nVeriedades:
\n<select name=”variety” id=”fruitVariety”>
\n<\/select>
\n[\/code]<\/p>\n
O conjunto de nomes de frutas j\u00e1 est\u00e1 habitado no lado do servidor e o conjunto padr\u00e3o de variedades pode ser muito, para preench\u00ea-los com Javascript siga este tutorial.<\/p>\n
O c\u00f3digo jQuery precisa inicialmente preencher o select das variedades com base no valor do select de frutos. Em seguida, ele necessita de atualizar as variedades o select de fruta mudar.
\nSupondo que o script PHP para pegar a fruta est\u00e1 em “\/variedades.php” fa\u00e7a isso:<\/p>\n
[code language=”jquery”]
\nfunction popularfrutas() {
\n$.getJSON(‘\/variedades.php’, {fruitName:$(‘#fruitName’).val()}, function(data) {
\nvar select = $(‘#fruitVariety’);
\nvar options = select.attr(‘options’);
\noptions[options.length] =
\n$(‘option’, select).remove();<\/div>
\n$.each(data, function(index, array) {
\nnew Option(array[‘variety’]);
\n});
\n});<\/p>\n
}<\/p>\n
$(document).ready(function() {<\/p>\n
<pre>
\n<pre>
\n<pre>popularfrutas<\/pre>
\n<\/pre>
\n<\/pre>
\n();
\n$(‘#fruitName’).change(function() {
\npopulateFruitVariety();
\n});<\/p>\n
});<\/pre>
\n<\/pre>
\n[\/code]<\/p>\n
\r\n new Option(array['variety']);\r\n });<\/pre>\npopulat<\/div>\n\r\n});\r\n\r\n}\r\n\r\n$(document).ready(function() {\r\n\r\n eFruitVariety();\r\n $('#fruitName').change(function() {\r\n populateFruitVariety();\r\n });\r\n\r\n});<\/pre>\nThe “$.getJSON(‘\/fruit-varities.php’, {fruitName:$(‘#fruitName’).val()}” line is what retrieves the data and it passes the currently selected fruit name value as part of the get string to the PHP script.<\/div>\nPHP Code<\/h2>\n
The PHP script connects to the database, retrieves the data for the selected fruit name and then returns it as a JSON encoded string.<\/div>\n$dsn = “mysql:host=localhost;dbname=[DATABASE NAME HERE]”;<\/div>\n$username = “[USERNAME HERE]”;<\/div>\n$pdo = new PDO($dsn, $usernam<\/div>\n$password = “[PASSWORD HERE]”;<\/div>\n\r\ne, $password);<\/pre>\n{ \u00a0\u00a0\u00a0 $stmt = $p<\/div>\n\r\n$rows = array();\r\nif(isset($_GET['fruitName']))<\/pre>\ndo->prepare(“SELECT variety FROM fruit WHERE name = ? ORDER BY variety”);<\/div>\n\r\n$stmt->execute(array($_GET['fruitName']));<\/pre>\n} echo json_encode($rows);<\/div>\n\u00a0\u00a0\u00a0 $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);<\/div>\nCaching issues<\/h2>\n
Internet Explorer and Firefox will cache the subsequent requests made to the same fruit name but the other browsers won’t, requesting them again each time.<\/div>\nFurther reading<\/h2>\n
I haven’t written much in the way of comments for each of the above code snippets; they’ve all been covered to some degree in previous posts which led up to this one. Please refer to these in the \u00a0“Related Posts” list below.<\/div>\n","protected":false},"excerpt":{"rendered":"Bem, navegando pela net achei um tutorial legal sobre JSON com jQuery, PHP e MySQL. E resolvi postar… Este post mostra como preencher uma caixa de sele\u00e7\u00e3o com base no valor de outra, pela obten\u00e7\u00e3o de dados JSON com jQuery a partir de um script PHP que obt\u00e9m os dados de um banco de dados… Continuar lendo JSON com jQuery, PHP e MySQL<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[103,59,105,106],"_links":{"self":[{"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/posts\/4420"}],"collection":[{"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4420"}],"version-history":[{"count":1,"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/posts\/4420\/revisions"}],"predecessor-version":[{"id":4581,"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/posts\/4420\/revisions\/4581"}],"wp:attachment":[{"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softov.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}