美文网首页
ssm框架局部刷新select标签

ssm框架局部刷新select标签

作者: setone | 来源:发表于2017-08-05 21:45 被阅读0次

    应用环境:在页面通过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框

    相关文章

      网友评论

          本文标题:ssm框架局部刷新select标签

          本文链接:https://www.haomeiwen.com/subject/ddgjlxtx.html