前端bug总结

一、ajax前台接受数据时，如果出现UncaughtReferenceError: data is not defined，要注意数据接受的格式问题：

如果是多对数据就是data[i].id,如果是一对就是data.id

---

1.1.1后台传递的数据格式是HashMap<String,String>,传输的是多组数据，即for()

//分类
    @RequestMapping(value = "genre/{moviegenres}", method = RequestMethod.GET)
    @ResponseBody
    public List<HashMap<String, String>> selectMoviesByGenre(@PathVariable String moviegenres){
        List<HashMap<String, String>> movies=new LinkedList<>();
        List genreMovies=movieService.getMovieByGenres(moviegenres);
        for (int i=0; i<genreMovies.size(); i++){
            Movie thisMovie=(Movie)genreMovies.get(i);
            HashMap<String, String> movie=new HashMap<>();
            movie.put("movieId", thisMovie.getMovieId());
            movie.put("movieTitle", thisMovie.getMovieTitle());
            movie.put("movieScore", String.valueOf(thisMovie.getMovieScore()));
            movie.put("moviePoster", thisMovie.getMoviePoster());
            movie.put("movieGenres", thisMovie.getMovieGenres());

            movies.add(movie);
        }
        return movies;
    }

1.1.2前台接受数据是多组数据，即for( data[i].id)

function getMovieType(moviegenres) {

        $.ajax({
            url: ip + '/movie/genre/' + moviegenres,
            type: 'GET',
            dataType: 'json',
            success: function(item) {
                //alert(item.length)
                $("#movieList_id").empty()
                var str = '';
                var i = 0;
                for (var i = 0; i < item.length; i++) {
                    //add=item[i].moviePoster.replace("../","");
                    str+='<div class="test">'+'<img src="'+item[i].moviePoster+'" style="max-width: 100%;height: 14.6875rem" />'+
                        '<span>'+item[i].movieScore+'</span><a href="movieDetail2.html?id='+item[i].movieId+'">详情</a></div>'
                }
                $("#movieList_id").append(str)
            },
            Error: function() {
                alert('请求出错');
            }

        });
    }

1.2.1后台传输数据格式是一组数据

//电影详情
    @RequestMapping("details/{movieId}")
    @ResponseBody
    public HashMap<String, String> getMovieDetails(@PathVariable String movieId){
        Movie movie=movieService.selectMovieById(movieId);
        HashMap<String, String > movieDetails=new HashMap<>();

        movieDetails.put("movieId", movieId);
        movieDetails.put("movieTitle", movie.getMovieTitle());
        movieDetails.put("movieGenres", movie.getMovieGenres());
        movieDetails.put("movieScore", String.valueOf(movie.getMovieScore()));
        movieDetails.put("moviePoster", movie.getMoviePoster());
        movieDetails.put("movieIntro", movie.getMovieIntro());

        return movieDetails;
    }

1.2.2前台接受的也是一组数据data.id

function getMovieDetail(movieId) {
				$.ajax({
					//url: ip + '/movie/movieDetail?movieId='+movieId,
					url: ip + '/movie/details/' +movieId,
					type: 'GET',
					dataType: 'json',
					async : false,
					success: function(data) {		
						showData(data); 	
					},
					Error: function() {
						alert('请求出错');
					}
				
				});	
			}
			function showData(data){
				var str="";
					//add=data.moviePoster.replace("../","");
					str="<img src='"+data.moviePoster+"' width='200'height='200' /><h2 class='major'>"+data.movieTitle+data.movieScore+"</h2><label>电影简介</label><p>"+data.movieIntro+"</p>"
					//str="<h2 class='major'>"+data.movieTitle+data.movieScore+"</h2><label>电影简介</label><p></p>"	
					$("#tab").append(str);
				
			}

1.3.1后台传输的数据格式HashMap<String, Object>，先前面是单个data，后面点开方法发现是list，故前面用data.movieid，后面用data.moviePoster[i].id

 //个人主页
    @RequestMapping(value = "userDetail", method = RequestMethod.GET)
    @ResponseBody
    public HashMap<String, Object> getUserDetails( HttpServletRequest request, HttpServletResponse response){
        HashMap<String, Object> userDetails=new HashMap<>();
        String userId=(String) request.getSession().getAttribute("USERNAME");
        User user=userService.selectUserById(userId);
        userDetails.put("userId", user.getUserId());
        userDetails.put("userName", user.getUserName());
        userDetails.put("userGender", user.getUserGender()==0?"男":"女");
        userDetails.put("userAge", user.getUserAge());
        userDetails.put("userOccu", user.getUserOccu());
        userDetails.put("userRecomMovies", userService.getUserRecom(userId));
        userDetails.put("userRatings", userService.getUserRatings(userId));

        return userDetails;
    }

public List<HashMap<String, String>> getUserRecom(String userId){
        String userRecom=userRecomDao.selectUserRecomById(userId).getMovieIdList();
        System.out.println("****************"+userId);
        String [] recomMovieIds=userRecom.split("::");
        List<HashMap<String, String>> recomMovies=new LinkedList<>();
        for (int i=0; i<10; i++){
            Movie movie=movieDao.selectMovieById(recomMovieIds[i]);
            HashMap<String, String> movieMap=new HashMap<>();
            movieMap.put("movieId", movie.getMovieId());
            movieMap.put("movieTitle", movie.getMovieTitle());
            movieMap.put("movieGenres", movie.getMovieGenres());
            movieMap.put("movieScore", String.valueOf(movie.getMovieScore()));
//前面是单个data，后面点开方法发现是list，故前面用data.movieid，后面用data.moviePoster[i].id
            movieMap.put("moviePoster", movie.getMoviePoster());
            movieMap.put("movieIntro", movie.getMovieIntro());

            recomMovies.add(movieMap);
        }

        return recomMovies;
    }

 

   public List<HashMap<String, String>> getUserRatings(String userId){
        List<HashMap<String, String>> ratingMovies=new LinkedList<>();
        List<Rating> ratings=ratingDao.selectRatingByUserId(userId);

        for (int i=0; i<ratings.size(); i++){
            Rating rating=ratings.get(i);
            HashMap<String, String> ratingMap=new HashMap<>();
            ratingMap.put("userId", rating.getUserId());
            ratingMap.put("movieId", rating.getMovieId());
            ratingMap.put("ratingScore", String.valueOf(rating.getRatingScore()));
            ratingMap.put("ratingTime", rating.getRatingTime());

            ratingMovies.add(ratingMap);
        }

        return ratingMovies;
    }

1.2.2前台接受的先前面是单个data，后面点开方法发现是list，故前面用data.movieid，后面用data.moviePoster[i].id

function getUserDetail(){
		$.ajax({
			url: ip + '/user/userDetail',
			type: 'GET',
			dataType: 'json',
			async : false,//同步 当执行当前AJAX的时候会停止执行后面的JS代码，直到AJAX执行完毕后时，才能继续执行后面的JS代码。
			success: function(data) {
				showData(data); //我们仅做数据展示
			},
			Error: function() {
				alert('请求出错');
			}
		});
	}
	//展示数据
	function showData(data) {
		var userStr = ""; //定义用于拼接的字符串
		var movieStr="";
			userStr="<p>昵称："+data.userName+"</p><p>性别："+data.userGender+"</p><p>职业："+data.userOccu+"</p>"
		 	$("#utab").append(userStr);

        for(var i=0;i<data.userRecomMovies.length;i++){
            //alert(data.userRecomMovies[i].movieTitle)
            movieStr = "<tr><td>" + data.userRecomMovies[i].movieTitle + "</td><td>" + data.userRecomMovies[i].movieScore +"</td><td>" + " <button type='button' onClick='jump("+data.userRecomMovies[i].movieId+")'>Learn More</button>"+"</td></tr>"
            $("#tab").append(movieStr);
		}
	}

二、前台传多个参数，且参数之间通过/隔开

http://localhost:8889/movie/movieRating/1830/5（其中1830和5均是参数）

 @RequestMapping("movieRating/{movieId}/{ratingScore}")
    @ResponseBody
    public Result<Integer, Object> movieRating(@PathVariable String movieId, @PathVariable int ratingScore,
                                               HttpServletResponse response, HttpServletRequest request){

        Rating rating =new Rating();
        rating.setUserId((String) request.getSession().getAttribute("USERNAME"));
        rating.setMovieId(movieId);
        rating.setRatingScore(ratingScore);
        rating.setRatingComment(null);
        rating.setRatingTime(DateTime.now().toString("yyyy-MM-dd HH:mm:ss"));
        ratingService.insertRating(rating);
        System.out.println("###############"+rating.getRatingTime());

        return new Result<>(200, "评分成功！");
    }

前台接受地址映射

//http://localhost:8889/movie/movieRating/1830/5
			function sendRate(movieId,movieRating) {
				alert(movieId);
				alert(movieRating);
				$.ajax({
					url: ip + '/movie/movieRating/'+movieId+'/'+movieRating,
					//url:"DataSourceCheck/refreshDataSource?dataSourceId=666",
					//url: ip + '/movie/movieRating/',
					type: 'GET',
					//data: "{movieId:'" + movieId + "'/movieRating:'" + movieRating + "'}", 
					dataType: 'json',
					//async : false,
					success: function(res) {
						alert("hhh")
						if(res.status==200)	{
							alert("评分成功")	
						}		
					},
					Error: function() {
						alert('请求出错');
					}
				
				});	
			}

三、http://www.mobanwang.com/ 模板王免费模板

四、Uncaught ReferenceError: $ is not defined 问题原因分析总结及问题解决寻找位置（原因js出错）

1.引用js路径错误 一般这个需要再html或jsp中寻找  位置如下:

或者使用在线js

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

2、js中书写错误  

包含不局限  方法上下不匹配  参数错误  值传递未接收等

五、前端页面之间的传参和接收

传参

<a href="movieDetail2.html?id='+item[i].movieId+'">详情</a>

接参

<script>
function getQueryVariable(variable)
			{
			       var query = window.location.search.substring(1);
			       var vars = query.split("&");
			       for (var i=0;i<vars.length;i++) {
			               var pair = vars[i].split("=");
			               if(pair[0] == variable){return pair[1];}
			       }
			       
			}


var movieId=getQueryVariable("id")//参数已经传递在movieId中了
</script>

六、在前端如何接收ajax传递来的数据并展示

6.1带图片的

function getMovieDetail(movieId) {
				$.ajax({
					//url: ip + '/movie/movieDetail?movieId='+movieId,
					url: ip + '/movie/details/' +movieId,
					type: 'GET',
					dataType: 'json',
					async : false,
					success: function(data) {		
						showData(data); 	//展示数据
					},
					Error: function() {
						alert('请求出错');
					}
				
				});	
			}

//展示数据，带图片的
			function showData(data){
				var str="";
				
					// alert(data.moviePoster)
					// alert(data.movieTitle)
					// alert(data.movieScore)
					// alert(data.movieIntro)
					
					add=data.moviePoster.replace("../","");
					str="<img src='"+add+"' width='200'height='200' /><h2 class='major'>"+data.movieTitle+data.movieScore+"</h2><label>电影简介</label><p>"+data.movieIntro+"</p>"	
					//str="<h2 class='major'>"+data.movieTitle+data.movieScore+"</h2><label>电影简介</label><p></p>"	
					$("#tab").append(str);
				
			}

6.2表格展示的

		//展示数据
		function showData(data) {
			var str = ""; //定义用于拼接的字符串
			for (var i = 0; i < data.length; i++) {
				//拼接表格的行和列
				str = "<tr><td>" + data[i].movieTitle + "</td><td>" + data[i].movieScore +"</td><td>" + " <a href='movieDetail2.html?id="+data[i].movieId+"'>LearnMore</a></td></tr>"
				//追加到table中
				//alert(data[i].movieId)
				$("#tab").append(str);
			}
		}