老师,下拉菜单全是undefined是怎么回事呀

来源:3-7 实现二级联动菜单-1

qq_cookies_oqrHNO

2019-04-09 20:14:05

package com.imooc.ajax;

public class Channel {
private String code;
private String name;

public Channel() {
    
}
public Channel(String code, String name) {
    super();
    this.code = code;
    this.name = name;
}
public String getCode() {
    return code;
}
public void setCode(String code) {
    this.code = code;
}
public String getName() {
    return name;
}
public void setName(String name) {
    this.name = name;
}

}

package com.imooc.ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

/**
 * Servlet implementation class ChannelServlet
 */
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ChannelServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String level=request.getParameter("level");
        String parent=request.getParameter("parent");
        List chList=new ArrayList();
        if(level.equals("1")) {
            chList.add(new Channel("ai","前沿/区块链/人工智能"));
            chList.add(new Channel("web","前沿/小程序/JS"));
        }else if(level.equals("2")) {
            if(parent.equals("ai")) {
                chList.add(new Channel("micro","微服务"));
                chList.add(new Channel("blockchain","区块链"));
                chList.add(new Channel("other","..."));
            }else if(parent.equals("web")){
                chList.add(new Channel("html","HTML"));
                chList.add(new Channel("css","CSS"));
                chList.add(new Channel("other","..."));
            }
        }
        String json=JSON.toJSONString(chList);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(json);
    }

}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
    $.ajax({
        "url":"/ajax/channel",
        "data":{"level":"1"},
        "type":"get",
        "datatype":"json",
        "success":function(json){
            console.log(json);
            for(var i=0;i<json.length;i++){
                var ch=json[i];
                $("#lv1").append("<option value='"+ch.code+"'>"+ch.name+"</option>");
            }
        }
        
    })
})
</script>
</head>
<body>
<select id="lv1" style="width:200px; height:30px"><option selected="selected">请选择</option></select>
<select id="lv2" style="width:200px; height:30px"></select>
</body>
</html>

写回答

1回答

芝芝兰兰

2019-04-10

同学你好。dateType的T需要大写,不然Ajax不认,相当于没有设置dataType哦,不能将json按照JSON格式解析。

http://img.mukewang.com/climg/5cad8eab0001cf7c06400360.jpg

将其改为大写就可以了哦~效果如图:

http://img.mukewang.com/climg/5cad8ed7000155f402180172.jpg

如果解答了同学的疑问,望采纳~

祝学习愉快~


0

0 学习 · 10204 问题

查看课程