應(yīng)用環(huán)境：在頁面通過ajax添加博客文章分類亿汞，然后頁面自動局部刷新出來你剛才添加的分類

如圖，點擊添加按鈕后，后臺會自動添加一個分類艾船，然后紅色方框會局部刷新出方才添加的分類

image.png

不多說，貼代碼
1.springmvc.xml需要添加json支持

    <!-- 配置使用@ResponseBody方法返回數(shù)據(jù)的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數(shù)據(jù)時一定要配置該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里面的數(shù)據(jù)
                        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;
    }
}

至此我們實現(xiàn)了添加之后自動刷新select框