是我哪里错了？
来源：3-8 实现二级联动菜单-2
xxxxxxb
2020-01-11 22:35:36
我写的和老师的一样，一级频道可以了，然后做到二级频道的是后，定义的va在控制台可以根据点击的条目分别输出ai和web，但是调用ajax请求后，输出的ajax对象就是空的了；
如果把“data”从"data" : {"level" : "2" , "parent" : va },换成"data" : {"level" : "2" , "parent" : “ai”},也就是不用调取一级的value值，而直接调用servlet里的ai条目就可以看到json对象，这是为什么？
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 ChannerlServlet
*/
@WebServlet("/channel")
public class ChannerlServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ChannerlServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//查询哪级频道,1级，2级
String level = request.getParameter("level");
//1级频道的编码
String parent = request.getParameter("parent");
List<Channel> chlist = new ArrayList<Channel>();
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("block","区块链"));
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 lists = JSON.toJSONString(chlist);
response.getWriter().println(lists);
}
}
=============================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.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>");
}
}
})
})
//联动二级频道的数据
$(function(){
$("#lv1").on("change",function(){
var va = this.value;
console.log(va);
$.ajax({
"url" : "/ajax/channel",
//查询的频道级别"parent"代表一级频道的value值 ;parent代表上面获取的变量
"data" : {"level" : "2" , "parent" : va },
"type" : "get",
"dataType" : "json",
"success" : function(json){
console.log(json);
}
})
})
})
</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>
3回答
-
同学你好！
你的想法是正确的，的确是因为你的value多了空格导致的，同学自己找到了问题，给你点赞。
加油，祝学习愉快~
0 -
xxxxxxb
提问者
2020-01-11
我查了一遍，应该是在做一级频道时value处引号里多了两个空格引起的
0h020-01-11 -
xxxxxxb
提问者
2020-01-11
图一是我调用一级频道的value值，可以看出控制台可以输出ai，但到调用ajax时就是空的了；
图二三是我直接将ajax请求中data的“parent”对应的value改成“ai”,这时就能输出json对象了
0
相似问题