spring mvc+ajax实现省市区三级联动以及406 (Not Acceptable)的解决办法-博客-最代码

首页>博客>spring mvc+ajax实现省市区三级联动以及406 (Not Acceptable)的解决办法

万能的程序员 2018-01-30 18:23:20

spring mvc+ajax实现省市区三级联动以及406 (Not Acceptable)的解决办法

我做一个小的测试实现功能

最主要是说一下遇到的问题：

我先用的spring3.2的包但是遇到好多的问我问题，

（1）首先就是不能使用*.htm,*.html的地址后缀；

（2）这个会报406 (Not Acceptable)的错误：

办法：1.你可以换成4.0的包，然后就能支持*.htm的后缀了；2.看看你的json包导进去没jackson-annotations-2.7.0.jar ，jackson-core-2.7.0.jar ，jackson-databind-2.7.0.jar；

3.在spring配置文件中加入以下代码

<bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">    
	    <property name="supportedMediaTypes">    
	        <list>    
	            <value>text/html;charset=UTF-8</value>    
	        </list>    
	    </property>    
	</bean>    
	     
	<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">    
	    <property name="messageConverters">    
	        <list>    
	            <ref bean="mappingJacksonHttpMessageConverter" /><!-- json转换器 -->    
	        </list>    
	    </property>    
	</bean>

下面是实现的代码：

1.首先创建页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>个人网站</title>
	 <script type="text/javascript">
	 
	 function select(){
		 var praviceID = $("#sheng").val();
          $.ajax({  
        	 url:"sheng.htm",
             type:"POST",
             //contentType:"application/json",
             dataType:"json",
             data:{"pravice":praviceID},  
             success:function(data){  
             	$("#shi").html("");//先清空
             	//遍历传过来的list集合
             	$.each(data,function(i,sheng){
             		$("#shi").append(
                         	"<option value='"+sheng.id+"'>"+sheng.name+"</option>"		
                         	)
             	})
             }  
         }); 
     };
     function select1(){
    	 var shengID = $("#shi").val();
    	 $.ajax({
    		 url:"sheng1.htm",
    		 type:"POST",
    		 dataType:"json",
    		 data:{"sheng":shengID},
    		 success:function(data){
    			 $("#qu").html("");
    			 $.each(data,function(i,qu){
    				 $("#qu").append(
                          	"<option value='"+qu.id+"'>"+qu.name+"</option>"		
                          	)
    			 })
    		 }
    		 
    	 });
     };
	 </script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
       <div>
            <h1>省市区三级联动</h1>  
                省份:  
                <select id="sheng" onchange="select()">  
                    <option value="">-请选择-</option>  
                    <!-- 循环显示所有省份 -->  
                    <c:forEach items="${list}" var="pv" >  
                        <option value="${pv.id}">${pv.name}</option>  
                    </c:forEach>  
                </select>  
                城市:  
                <select id="shi" onchange="select1()">  
                    <option value="">-请选择-</option>  
                </select>  
                区域:  
                <select id="qu">  
                    <option value="">-请选择-</option>  
                </select>  
        </fieldset>
	  
	</div>
	
</body>
</html>

2.后台代码：

controller层：

@Controller
public class LoginController {
	
	@Autowired
	private ShengService ss;
	@Autowired
	private PraviceService ps;
	@RequestMapping("/wel.htm")
	  public String getWel(HttpServletRequest req)
	  {
		log.info("初始化页面.................");
		List<Pravice> list = ps.getId();
		req.setAttribute("list", list);
	    return "index";
	  }
	@RequestMapping("/sheng.htm")
	@ResponseBody
	public List<Sheng> getS(@RequestParam(value = "pravice")int praviceID){
		System.out.println(praviceID);
		List<Sheng> name = ss.getSheng(praviceID);
		for(Sheng s:name){
			System.out.println(s.getName());
		}
		return name;
	}
	@RequestMapping("/sheng1.htm")
	@ResponseBody
	public List<Sheng> getQ(@RequestParam(value = "sheng")int shengID){
		System.out.println(shengID);
		List<Sheng> name = ss.getSheng(shengID);
		for(Sheng s:name){
			System.out.println(s.getName());
		}
		return name;
	}
}

dao层

public interface ShengDao {
	
	@Select("select id,name,father from sheng where father=#{father}")
	List<Sheng> getSheng(int father);
	
}

public interface PraviceDao {
	@Select("select id,name from pravice")
	List<Pravice> getPravice();
	
}

service层

@Service
public class ShengService {
	
	@Autowired
	private ShengDao sd;
	
	public List<Sheng> getSheng(int id){
		List<Sheng> s = sd.getSheng(id);
		return s;
	}
	
}

@Service
public class PraviceService {

	@Autowired
	private PraviceDao pd;
	
	public List<Pravice> getId(){
		List<Pravice> list = new ArrayList<Pravice>();
		list = pd.getPravice();
		return list;
	}
	
}

实体类

实体类可以创建一个，不需要弄成两个或者多个。

public class Sheng {
	private int id;
	private String name;
	private int father;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getFather() {
		return father;
	}
	public void setFather(int father) {
		this.father = father;
	}
	
}

public class Pravice {
	private int id;
	private String name ;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
}

数据库结构大家看着实体类自己做一下。

4.效果：

打赏

2个评论