nodejs+express+mysql(后台实例项目练习10—用户界面下拉列表)
通过JQ与路由js交互
ejs片段
<tr><tdclass="td_1">用户组：</td><td><divid="s1"class="select"><span>搜索</span><ul></ul><inputtype="hidden"name="usergroup"id="usergroup"/></div></td></tr>
JQ片段
$(document).ready(function(){$.get("/getallgroup",function(data,err){console.log(data);for(vari=0;i<data.length;i++){varliNode=$("<limyindex="+data[i].groupId+">"+data[i].groupName+"</li>");$("#s1ul").append(liNode);}})})functionselect(id){$(id+"span").click(function(){$(id+"ul").show(500);$(id+"ulli").click(function(){$(id+"span").html($(this).html());$(id+"input").val($(this).attr("myindex"));$(id+"ul").hide(500);});});}$(document).ready(function(){select("#s1");select("#s2");});
路由事件
varexpress=require('express');varrouter=express.Router();vardb=require('../sql_db.js');/*GETuserslisting.*/router.get('/adduser',function(req,res,next){res.render('user_add.ejs');});router.get('/getallgroup',function(req,res,next){db.query('select*fromusergroup',function(err,data){if(err){console.log(err);}else{res.send(data);}});});module.exports=router;
数据访问方式
HTML界面加载》》JQready事件》》$get》》路由JS访问数据库得到数据 sender》》JQ的callback获得数据》》绑定HTML
JQ事件
//绑定事件functionselect(id){//注册事件$(id+"span").click(function(){//动画显示ul$(id+"ul").show(500);//绑定事件$(id+"ulli").click(function(){//替换文本$(id+"span").html($(this).html());//设置属性方便数据提交$(id+"input").val($(this).attr("myindex"));//隐藏掉ul$(id+"ul").hide(500);});});}$(document).ready(function(){select("#s1");select("#s2");});
