ssm框架局部刷新select标签

应用环境：在页面通过ajax添加博客文章分类，然后页面自动局部刷新出来你刚才添加的分类

如图，点击添加按钮后，后台会自动添加一个分类，然后红色方框会局部刷新出方才添加的分类

image.png

不多说，贴代码
1.springmvc.xml需要添加json支持

    <!-- 配置使用@ResponseBody方法返回数据的bean -->
    <bean
        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
        <property name="messageConverters">
            <list>
                <!-- 配置该bean是为了解决返回字符串的中文乱码问题,因为StringHttpMessageConverter默认编码为ISO-8859-1 -->
                <bean
                    class="org.springframework.http.converter.StringHttpMessageConverter">
                    <property name="supportedMediaTypes">
                        <list>
                            <value>text/html;charset=UTF-8</value>
                        </list>
                    </property>
                </bean>
                <!-- 返回JSON数据时一定要配置该bean -->
                <bean
                    class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                    <property name="supportedMediaTypes">
                        <list>
                            <value>application/json;charset=UTF-8</value>
                        </list>
                    </property>
                </bean>
            </list>
        </property>
    </bean>   

2.前端页面js部分

<select class="form-control" id="category_id" >

<script type="text/javascript">
            function addTagButton(){
                $.ajax({
                    type:"post",
                    url:"<%=basePath%>category/add",
                    data : {
                        "category_name" : $("#category_name").val()
                    },
                    dataType:"json",
                    success : function(data) {
                        $("#category_id").empty();//清除select里面的数据
                        var categoryList = data;
                        $.each(categoryList, function(index, clist){
                            var selectForEach = "<option value="+clist.categoryId+">"+clist.categoryName+"</option>";
                            $("#category_id").append(selectForEach);
                        });
                        alert("添加成功");
                    }
                });
            };
</script>

3.Controller后台

@Controller
public class CategoryController {
    // 添加一个类
    @Autowired
    CategoryService categoryService;
    @RequestMapping("/category/add")
    @ResponseBody
    public  List<Category> insertSelective(String category_name) {
        //添加类别
        categoryService.insertSelective(category_name);
               //查询类别
        List<Category> categoryList = categoryService.selectByExample();
        return  categoryList;
    }
}

至此我们实现了添加之后自动刷新select框