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