用jQuery和AJAX来完成异步下拉菜单的功能

首先要在数据库中有一个Ttype表:

 用jQuery和AJAX来完成异步下拉菜单的功能

 

然后使用 IDEA或者myeclipse 等别的java开发软件去搭建一个WEB项目;

先去把Ttype的实体类和DAO层和Service层搭建完毕;(也就是三层架构啦)

+++++++++++++++++++++++++++++++++

 

Controller层的源码:

package com.xiexin.controller;

import com.xiexin.bean.TType;
import com.xiexin.service.TTypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/type")
public class TTypecontroller {

    @Autowired
    private TTypeService tTypeService;
    //写一个全查的数据的接口 给 前端的下拉框使用, 对应的是全查
    // 注意 给数据,直接用 json ,不在 转发 和 el /jstl表达式
    @RequestMapping("/selectAll")
    @ResponseBody
    public Map selectAll() throws IOException {
        // 调用 service 层。。。。
        List<TType> tTypes = tTypeService.selectByExample(null);
        Map codeMap=new HashMap();
        codeMap.put("code",0);
        codeMap.put("data",tTypes);

        return codeMap;
    }

}

 

HTML页面源码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增业务</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    
</head>
<body>
    <h1>新增业务</h1>
    <form action="" method="post">
    业务类型: <select id="typeId" name="typeId">
        <option value="" selected="">请选择</option>
    </select>
    <br>
    排队号:<input type="text" name="" /> <br>
        备注信息:<textarea name="" cols="30" rows="10"></textarea>
        <br>
        <input type="submit" value="确认增加">

    </form>
<script>
            //发送ajax 得到数据后渲染到 select 框中
            //异步 刷新 layui 的下拉框
                $.ajax({
                    url: '/type/selectAll',
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                        var select = $("#typeId")
                        $.each(res.data, function (index, item) {
                            select.append(new Option(item.typeName,item.id));  //在下拉菜单里添加元素
                        });
                    }
                });

</script>
</body>
</html>

上一篇:万字总结!全网最全的Java并发编程知识点


下一篇:Tree后端实现