点击button后Servlet没有访问到

老师你好，我的点击button后没有访问到Servlet，代码如下

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>播放列表查看</title>
</head>
<body>
<div class="up">

</div>
<div class="down">
<div class="h1" #id="tip1"></div>
<div class="h2" #id="tip2"></div>
<div class="h3" #id="tip3"></div>
</div>
</body>
<script type="text/javascript">
$("#l1").click(function() {
  $.ajax({
   url:"<%=basePath%>/ListServlet",
   type:"post",
   data:{
    list:$("input[name=song1]").val()
   },
   datatype:"json",
   success:function(result){
   $("#tip1").text(result.song1);
   $("#tip2").text(result.song2);
   $("#tip3").text(result.song3);
   }
  })
})
$("#l2").click(function() {
  $.ajax({
   url:"<%=basePath%>/ListServlet",
   type:"post",
   data:{
    list:$("input[name=song2]").val()
   },
   datatype:"json",
   success:function(result){
   $("#tip1").text(result.song1);
   $("#tip2").text(result.song2);
   $("#tip3").text(result.song3);
   }
  })
})
$("#l3").click(function() {
  $.ajax({
   url:"<%=basePath%>/ListServlet",
   type:"post",
   data:{
    list:$("input[name=song3]").val()
   },
   datatype:"json",
   success:function(result){
   $("#tip1").text(result.song1);
   $("#tip2").text(result.song2);
   $("#tip3").text(result.song3);
   }
  })
})
</script>

Servlet代码如下

package servlet;

import java.io.IOException;
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 org.json.JSONObject;

@WebServlet("/ListServlet")
public class ListServlet extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  System.out.println("Servlet调用成功");
  request.setCharacterEncoding("utf-8");
  String list = request.getParameter("list");
  System.out.println("list=" + list);
  JSONObject jsonObject = null;
  if (list.equals("流行歌曲")) {
   jsonObject = new JSONObject("{song1:稻香,song2:晴天,song3:告白气球}");
  } else if (list.equals("经典歌曲")) {
   jsonObject = new JSONObject("{song1:千千阙歌,song2:傻女,song3:七友}");
  } else if (list.equals("摇滚歌曲")) {
   jsonObject = new JSONObject("{song1:一块红布,song2:假行僧,song3:新长征路上的摇滚}");
  }
  response.getOutputStream().write(jsonObject.toString().getBytes());
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

}

李成大独秀 2018-07-22

源自：Ajax入门 2-3 自由编程

收起

4回答

好帮手慕阿莹回答被采纳获得+3积分 2018-07-23 12:05:14

建议把datatype 改为dataType试试。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

李成大独秀提问者 #1

老师你好，我把datatype给为dataType后，ajax接收到的数据也不能正常显示，三个按钮只有一个可以显示，还出现了乱码。不过我把Servlet中返回的json数据中的中文改为英文后可以正常显示，现在主要问题是这个乱码怎么解决谢谢老师

2018-07-24 18:07:23
好帮手慕阿莹回复提问者李成大独秀 #2

response.getOutputStream().write(jsonObject.toString().getBytes());改为response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));试试

2018-07-24 18:14:43

提问者李成大独秀 2018-07-23 09:55:54

我把index.jsp里面的

success:function(result){
   $("#tip1").text(result.song1);
   $("#tip2").text(result.song2);
   $("#tip3").text(result.song3);
   }改为

success:function(result){
   $("#tip1").text("报错嘞");
   $("#tip2").text("报错嘞");
   $("#tip3").text("报错报错嘞");
   }后，点击对应的button后，可以显示，问题应该出在servle给ajax放回的json数据上吗，index.jsp无法用result.song1的形式访问json数据，不知道我在哪里写错了，麻烦老师帮我看一下

收起回答