html select下拉菜单从数据库中读取 ajax

最新推荐文章于 2024-07-23 20:31:08 发布

ChasonLIU

最新推荐文章于 2024-07-23 20:31:08 发布

阅读量1.4w

点赞数 5

文章标签：数据库 html ajax select

本文链接：https://blog.csdn.net/ChasonLIU/article/details/50014151

版权

首先

html中：

<span style="font-size:18px;"> <td>港口名称：</td>
 <td>
    <select name="ttc_portname" id="ttc_portname"  style="width:158px;">
    </select>
</td></span>

下面为给下拉菜单赋值：
在body中我们定义一个onload函数：

<span style="font-size:18px;"> <body  οnlοad="getCHART_NAME()">
   
</span>

然后在js中定义函数

<span style="font-size:18px;"> function getPORT_NAME()//港口字段 下拉菜单自动从数据库中读取填充
    {
       var str="select 字段名 from 数据库名 t group by 字段名";
       ajax(str);
     }
 下面我们写异步传输ajax：

 function ajax(str)
    {
     if (xmlhttp!=null)
     {
      xmlhttp.onreadystatechange=function()
       {
        if (xmlhttp.readyState==4 &&xmlhttp.status==200)
         {
          document.getElementById_x_x("ttc_portname").innerHTML=xmlhttp.responseText;
         // 此时接受到后台传来的str语句添加到innerHTML，即完成下拉菜单的赋值
         }
       };
      
      }
       var src ="/tjhc/ajax/1.jsp?str=" + str; / /此处为ajax后台地址，我们将语句传输到后台
      xmlhttp.open("POST",src,true);
      xmlhttp.send();   
    }

 以下为后台

   String sql =request.getParameter("str");

    String def=request.getParameter("def");
    if(def!=null)
    def = newString(def.getBytes("ISO-8859-1"),"utf-8");
    else
    def="";
    String str ="";
    StringPORT_NAME="";
    ConnectionmyConn = new ConnDB().getConn();
   
    if(sql!=null&&(sql!="")&&!sql.equals("null"))
    {
      PreparedStatement mySta = myConn.prepareStatement(sql);
       ResultSet rs= mySta.executeQuery();
      while(rs.next())
        {
          PORT_NAME= rs.getString("PORT_NAME");
          if(PORT_NAME != "" && PORT_NAME!= null)
          {
              if (PORT_NAME.equals(def))
              {
                   str +=""+PORT_NAME+"";
              }
              else
              {
                str +=""+ PORT_NAME +"";
             }
          }
            
         }
      out.print(str);//将str传输到ajax
      rs.close();
      mySta.close();
    }


若我们有多个下拉菜单，可以分多个ajax 一个处理完在下面激活另一函数，以此类推！


</span>

ChasonLIU

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
html select下拉菜单从数据库中读取 ajax

首先 html中：港口名称：下面为给下拉菜单赋值：在body中我们定义一个onload函数：然后在js中定义函数 function getPORT_NAME()//港口字段下拉菜单自动从数据库中读取填充 { var str="select 字段名 from 数据库名 t gr
复制链接

扫一扫