数据检索到使用PHP MySQL的jQuery的AJAX下拉菜单 [英] retrieve data into ajax dropdown menu using PHP MySql jQuery

查看：307
本文介绍了数据检索到使用PHP MySQL的jQuery的AJAX下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建一个使用动态的多国下拉 jQuery的/ PHP / MySQL的。这工作不错，我存储/放的国家/国家/镇的MySQL数据库这样的（用户表）每个用户

  ID |国家|国家|镇|
 1 | 1 | 1 | 1 |
 2 | 1 | 1 | 3 |
 3 | 1 | 2 | 8 |

现在 edituser.php 页，我需要读取/检索 MySQL数据（用户表）来我的Jquery / Ajax的下拉列表。我叫 edituser.php？ID = 1 现在我需要打印/显示用户数据下拉阿贾克斯进行编辑的国家/国家/镇的用户。

如何能我检索/打印/节目吗？

记者：

 ＆LT;脚本类型=文/ JavaScript的SRC =JS / jQuery的-1.4.1.min.js＆GT;＆LT; / SCRIPT＆GT;
// jQuery库文件
＆LT;脚本类型=文/ JavaScript的＆GT;

/ *这个函数被调用时的状态下拉价值变动* /
功能selectState（STATE_ID）{
  如果（！STATE_ID = -  1）{
    loadData（城市，STATE_ID）;
  }其他{
    $（＃city_dropdown）HTML（＆LT;期权价值= -  1＆GT;选择城市＆LT; /选项＆gt;中）;
  }
}

/ *这个函数被调用时，城市下拉价值变动* /
功能selectCity（COUNTRY_ID）{
 如果（COUNTRY_ID =！ -  1）{
   loadData（国家，COUNTRY_ID）;
   $（＃city_dropdown）HTML（＆LT;期权价值= -  1＆GT;选择城市＆LT; /选项＆gt;中）;
 }其他{
  $（＃state_dropdown）HTML（＆LT;期权价值= -  1＆GT;选择国家＆LT; /选项＆gt;中）;
   $（＃city_dropdown）HTML（＆LT;期权价值= -  1＆GT;选择城市＆LT; /选项＆gt;中）;
 }
}

/ *这是主要的内容负荷的功能，并且它会
     调用时任何有效的下拉值改变。* /
功能loadData（loadType，loadId）{
  VAR dataString ='loadType ='+ loadType +'和; loadId ='+ loadId;
  $（＃+ loadType +_装载机）显示（）。
  $（＃+ loadType +_装载机）。淡入（400）。
        HTML（请稍候...＆LT; IMG SRC =图像/ loading.gif/＆GT;'）;
  $阿贾克斯（{
     键入：POST，
     网址：loadData.php
     数据：dataString，
     缓存：假的，
     成功：函数（结果）{
       $（＃+ loadType +_装载机）隐藏（）。
       $（＃+ loadType +_下拉）。
       HTML（＆LT;期权价值= -  1＆GT;选择+ loadType +＆LT; /选项＆gt;中）;
       $（＃+ loadType +_下拉）追加（结果）。
     }
   }）;
}
＆LT; / SCRIPT＆GT;

HTML：

  / *此code将显示国家下拉列表* /
＆LT;选择的onchange =selectCity（this.options [this.selectedIndex] .value的）＆GT;
   ＆LT;期权价值= -  1＆GT;选择国家＆LT; /选项＆GT;
   ＆LT; PHP
     而（$ rowCountry = mysql_fetch_array（$ resCountry））{
   ？＆GT;
     ＆LT;期权价值=＆LT; PHP的echo $ rowCountry ['身份证']＆GT;＆GT;
            ＆LT;？PHP的echo $ rowCountry ['COUNTRY_NAME']＆GT;
     ＆LT; /选项＆GT;
   ＆LT; PHP
   }
   ？＆GT;
＆LT; /选择＆GT;

/ *状态下拉列表中* /
＆LT;选择ID =state_dropdown
     的onchange =selectState（this.options [this.selectedIndex] .value的）＆GT;
＆LT;期权价值= -  1＆GT;选择国家＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆所述;跨度的id =state_loader＆GT;＆所述; /跨度＆GT;

/ *城市下拉列表中* /
＆LT;选择ID =city_dropdown＆GT;
＆LT;期权价值= -  1＆GT;选择城市＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆所述;跨度的id =city_loader＆GT;＆所述; /跨度＆GT;

Loaddata.php 

 包括（'dbConnect.inc.php'）;
$ loadType = $ _ POST ['loadType'];
$ loadId = $ _ POST ['loadId'];

如果（$ loadType ==状态）{
   $ SQL =选择编号，从state_test那里STATE_NAME
         COUNTRY_ID ='。$ loadId。为了通过STATE_NAME ASC;
}其他{
   $ SQL =选择编号，从city_test那里CITY_NAME
         STATE_ID ='$ loadId。通过CITY_NAME递增秩序;
}
$水库=的mysql_query（$ SQL）;
$检查= mysql_num_rows（$水库）;
如果（$检查＆GT; 0）{
   $的HTML =;
   而（$行= mysql_fetch_array（$水库））{
      $的HTML =＆LT;期权价值='$行['身份证'。＆gt;中。$行['1']＆LT; /选项＆gt;中。
   }
   回声$的HTML;
}

解决方案

很少有人想着你的code

  • 使用AJAX，尝试使用JSON发送和检索数据，这将要给大家介绍的增值分销商和用户界面的更多的自由。

  • 当你使用jQuery，尝试使用它尽可能多的，如果不定义在线活动，如果这些组中的脚本这将是您更轻松地管理它。

  • 关于选择，这是相当棘手的重新加载。在IE我记得我不能添加的选项，因此，你必须加载整个选择。

  • 不要使用PHP的mysql_query功能，都相当德precated。阅读并应用此：我如何prevent SQL注入在PHP？

  • 在从阿贾克斯装载值，你必须附加处理程序的DOM元素，这就是为什么使用。对（）函数，以确保它不会附加处理的元素。

  • 尝试使用jQuery的新库，因为它们是速度更快，功能强大，有更高的性能，1.4是pretty的老...

我已经写了你使用上面的东西，给你如何实现它的线索国家下拉菜单的一个例子，拿你的想法，你喜欢它：

index.html的： 

 ＆LT; HTML＆GT;

    ＆LT; HEAD＆GT;
        ＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT; /头＆GT;

    ＆LT;身体GT;

    ＆LT;脚本＆GT;
    $（文件）。就绪（函数（）{
        $（文件）。在（'变'，'#div_country选择，#div_state选择'，函数（）{
            变量$型= $（本）.attr（'数据类型'）;
            VAR的$ id = $（本）.VAL（）;

            如果（$ ID！=  -  1）{
                loadSelect（$类型的$ id）;
            }

        }）;

        功能loadSelect（$类型的$ id）{
            $阿贾克斯（{
                类型：'后'，
                网址：states.php，
                缓存：假的，
                数据： {
                    类型：$类型
                ，ID：$ ID
                }，
                数据类型：JSON，
                成功：功能（数据）{
                    如果（data.result ==真）{
                        如果（data.html！== undefined）的{
                            变量$格='';
                            如果（$类型=='国家'）{
                                $格=国家;
                            } 其他 {
                                $格=城市;
                            }
                            $（#div_+ $ DIV）。html的（data.html）;
                        }
                    } 其他 {
                        警报（'出事了！'）;
                    }
                }
            }）;
        }

    }）;
    ＆LT; / SCRIPT＆GT;

    ＆LT; D​​IV ID =div_country＆GT;
        ＆LT;选择数据类型=国家＆GT;
            ＆LT;期权价值= -  1＆GT;选择国家＆LT; /选项＆GT;
            ＆LT;期权价值=1＆GT;西班牙＆LT; /选项＆GT;
            ＆LT;期权价值=2＆GT;法国＆LT; /选项＆GT;
            ＆LT;期权价值=3＆GT;德国＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
    ＆LT; / DIV＆GT;

    ＆LT; D​​IV ID =div_state＆GT;
        ＆LT;选择数据类型=状态＆GT;
            ＆LT;期权价值= -  1＆GT;选择国家＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
    ＆LT; / DIV＆GT;

    ＆LT; D​​IV ID =div_city＆GT;
        ＆LT;选择＆GT;
            ＆LT;期权价值= -  1＆GT;选择国家＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
    ＆LT; / DIV＆GT;

    ＆LT; /身体GT;
＆LT; / HTML＆GT;

state.php 

 ＆LT; PHP
$型=使用isset（$ _ POST ['型']）？ $ _ POST ['类型']：'';

如果（！空（$类））{
    开关（$型）{
        案例国家：
            $结果= TRUE;
            $的HTML ='＆LT;选择数据类型=状态＆GT;
                        ＆LT;期权价值= -  1＆GT;选择国家＆LT; /选项＆GT;
                        ＆LT;期权价值=1→状态1＆LT; /选项＆GT;
                        ＆LT;期权价值=2→状态2'; /选项＆GT;
                    ＆LT; /选择＆GT;';
        打破;
        案状态：
            $结果= TRUE;
            $的HTML ='＆LT;选择数据类型=城市与GT;
                        ＆LT;期权价值= -  1＆GT;选择城市＆LT; /选项＆GT;
                        ＆LT;期权价值=1＆GT;城市1 LT; /选项＆GT;
                        ＆LT;期权价值=2＆GT;城市2'; /选项＆GT;
                    ＆LT; /选择＆GT;';
        打破;
        默认：
            $结果= FALSE;
            $的HTML ='';
        打破;
    }
}

$数据=阵列（
    '结果'=＆GT; $结果，
    HTML=＆GT; $ HTML
）;

我添加给你一个关于如何实现它的线索，它是一个独立的例子，你会看到下拉框的变化。你必须添加PHP的逻辑，但我想告诉你一个更好的方法，XD

i create dynamic multiple country dropdown using Jquery/PHP/MySql. this worked fine and i store/put country/state/town for each user in MySql Database like this (usertable) :

id  |  country  | state | town |
 1  |     1     |   1   |   1  |
 2  |     1     |   1   |   3  |
 3  |     1     |   2   |   8  |

now in edituser.php page i need to fetch/retrieve MySql data (usertable) to my Jquery/Ajax dropdown. i call edituser.php?id=1 Now i need to print/show user data to dropdown Ajax for edit country/state/town user.

How Do can i retrieve/print/show this?

JS:

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
// jquery library file
<script type="text/javascript">

/*This function is called when state dropdown value change*/
function selectState(state_id){
  if(state_id!="-1"){
    loadData('city',state_id);
  }else{
    $("#city_dropdown").html("<option value='-1'>Select city</option>");
  }
}

/*This function is called when city dropdown value change*/
function selectCity(country_id){
 if(country_id!="-1"){
   loadData('state',country_id);
   $("#city_dropdown").html("<option value='-1'>Select city</option>");
 }else{
  $("#state_dropdown").html("<option value='-1'>Select state</option>");
   $("#city_dropdown").html("<option value='-1'>Select city</option>");
 }
}

/*This is the main content load function, and it will
     called whenever any valid dropdown value changed.*/
function loadData(loadType,loadId){
  var dataString = 'loadType='+ loadType +'&loadId='+ loadId;
  $("#"+loadType+"_loader").show();
  $("#"+loadType+"_loader").fadeIn(400).
        html('Please wait... <img src="image/loading.gif" />');
  $.ajax({
     type: "POST",
     url: "loadData.php",
     data: dataString,
     cache: false,
     success: function(result){
       $("#"+loadType+"_loader").hide();
       $("#"+loadType+"_dropdown").
       html("<option value='-1'>Select "+loadType+"</option>");
       $("#"+loadType+"_dropdown").append(result);
     }
   });
}
</script>

HTML:

/*This code will show country dropdown list*/
<select onchange="selectCity(this.options[this.selectedIndex].value)">
   <option value="-1">Select country</option>
   <?php
     while($rowCountry=mysql_fetch_array($resCountry)){
   ?>
     <option value="<?php echo $rowCountry['id']?>">
            <?php echo $rowCountry['country_name']?>
     </option>
   <?php
   }
   ?>
</select>

/*State dropdown list*/
<select id="state_dropdown"
     onchange="selectState(this.options[this.selectedIndex].value)">
<option value="-1">Select state</option>
</select>
<span id="state_loader"></span>

/*City dropdown list*/
<select id="city_dropdown">
<option value="-1">Select city</option>
</select>
<span id="city_loader"></span>

Loaddata.php

include('dbConnect.inc.php');
$loadType=$_POST['loadType'];
$loadId=$_POST['loadId'];

if($loadType=="state"){
   $sql="select id,state_name from state_test where
         country_id='".$loadId."' order by state_name asc";
}else{
   $sql="select id,city_name from city_test where
         state_id='".$loadId."' order by city_name asc";
}
$res=mysql_query($sql);
$check=mysql_num_rows($res);
if($check > 0){
   $HTML="";
   while($row=mysql_fetch_array($res)){
      $HTML.="<option value='".$row['id']."'>".$row['1']."</option>";
   }
   echo $HTML;
}

解决方案

Few thinks about your code

  • With AJAX, try to use JSON to send and retrieve data, it's going to give you more freedom about vars and UI.

  • As you're using jQuery, try to use it as much as possible, not defining online events, if you group them in the script it'll be easier for you to manage it.

  • About the select, it's quite tricky reload them. In IE I remember I couldn't add options, so, you have to load the WHOLE select.

  • Don't use PHP mysql_query functions, are quite deprecated. Read and apply this: How can I prevent SQL injection in PHP?

  • When loading values from AJAX, you have to attach the handler to the DOM elements, that's why using .on() function, to make sure it does attach the handler to the elements.

  • Try to use the newer libraries of jQuery, as they are faster, powerful and have increased performance, 1.4 is pretty old...

I've written to you an example of dropdown of countries using above things, to give you a clue of how to achieve it, take what you think you like it:

index.html:

<html>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    </head>

    <body>

    <script>
    $(document).ready(function () {
        $(document).on('change', '#div_country select, #div_state select', function () {
            var $type = $(this).attr('data-type');
            var $id = $(this).val();

            if ( $id != -1 ) {
                loadSelect( $type, $id );
            }

        });

        function loadSelect( $type, $id ) {
            $.ajax({
                type: 'post',
                url: 'states.php',
                cache: false,
                data: {
                    'type': $type
                ,   'id': $id
                },
                dataType: 'json',
                success: function (data) {
                    if ( data.result == true ) {
                        if (data.html !== undefined) {
                            var $div = '';
                            if ( $type == 'country') {
                                $div = 'state';
                            } else {
                                $div = 'city';
                            }
                            $( "#div_" + $div ).html(data.html);
                        }
                    } else {
                        alert('Something went wrong!');
                    }
                }
            });
        }

    });
    </script>

    <div id="div_country">
        <select data-type="country">
            <option value="-1">Select Country</option>
            <option value="1">Spain</option>
            <option value="2">France</option>
            <option value="3">Germany</option>
        </select>
    </div>

    <div id="div_state">
        <select data-type="state">
            <option value="-1">Select Country</option>
        </select>
    </div>

    <div id="div_city">
        <select>
            <option value="-1">Select State</option>
        </select>
    </div>

    </body>
</html>

state.php

<?php
$type = isset( $_POST['type'] ) ? $_POST['type'] : '';

if ( !empty( $type ) ) {
    switch ($type) {
        case 'country':
            $result = true;
            $html = '<select data-type="state">
                        <option value="-1">Select State</option>
                        <option value="1">state 1</option>
                        <option value="2">state 2</option>
                    </select>';
        break;
        case 'state':
            $result = true;
            $html = '<select data-type="city">
                        <option value="-1">Select City</option>
                        <option value="1">city 1</option>
                        <option value="2">city 2</option>
                    </select>';
        break;
        default:
            $result = false;
            $html = '';
        break;
    }
}

$data = array(
    'result' => $result,
    'html' => $html
);

I've added to give you a clue about how to achieve it, it's a stand alone example, and you'll see the changes of the dropbox. You'll have to add the PHP logic, but I wanted to show you a better approach, XD

这篇关于数据检索到使用PHP MySQL的jQuery的AJAX下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆