点击按钮没任何显示？？？
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path=request.getScheme()+"://"+request.getServerName()+request.getServerPort()
+request.getServletContext().getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>歌曲页面</title>
<style>
.button{
width:33%;
text-align；center;
}
.show{
width:100%;
height:500px;
text-align:center;
font-size:20px;
}
</style>
</head>
<body>
<form action="<%=path%>/AjaxServlet" method="post">
<input class="button" type="button" name="songs" value="流行歌曲">
<input class="button" type="button" name="songs" value="经典歌曲">
<input class="button" type="button" name="songs" value="摇滚歌曲">
//将歌曲信息显示在这个块中
<div class="show"></div>
</form>
<script type="text/javascript" src="jquery-1.4.2.js">
//为每个按钮绑定事件
$(.button).click(function{
//单机num1按钮时触发Ajax事件
$ajax({
url:"AjaxServlet.java",
type:"post",
data:{
//获得用户点击的按钮值
songtype:$("input[name=songs]").val(),//传递给Servlet的值
}
datatype:"jsion",
success:function(result){
var flag=result.flag;
if(flag==1){
$(".show").text("凉凉");
}else if(flag==2){
$(".show").text("爱如潮水");
}else if(flag==3){
$(".show").text("Rock");
}
}
});
});
</script>
</body>
</html>
package com.imooc.ajax;
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("/AiaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String songs=request.getParameter("songType");
System.out.println(songs);
JSONObject js=null;
if(songs.equals("流行歌曲")) {
js=new JSONObject("{flag:1}") ;
}else if(songs.equals("经典歌曲")) {
js=new JSONObject("{flag:2}") ;
}else if(songs.equals("摇滚歌曲")) {
js=new JSONObject("{flag:3}") ;
}
response.getOutputStream().write(js.toString().getBytes("utf-8"));
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}正在回答
改成如下的内容，注意上面jq包的引入，之前的语法也还有些错误：
<script type="text/javascript" src="resources/js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$("#s1").click(function(){
//单击s1按钮触发Ajax事件
$.ajax({
url:"<%=path%>/AjaxServlet?type=1",
type:"post",
data:{
song1:$("input[name=song1]").val()
},
dataType:"json",
success:function(result){
var flag=result.flag;
if(flag==1){
$(".show").text("流行音乐");
}else{
$(".show").text("错误页面");
}
}
})
});
</script>
$(#s1).click(functoin(){
//单击s1按钮触发Ajax事件
$.ajax({
url:"<%=path%>/AjaxServlet?type=1",
type:"post",
data:{
song1:$("input[name=song1]").val()
},
datatype:"json",
success:function(result){
var flag=result.flag;
if(flag.equals("1")){
$(".show").text("流行音乐");
}else{
$(".show").text("错误页面");
}
}
});
});
String songs=request.getParameter("type");
JSONObject js=null;
if(songs.equals("1")) {
js=new JSONObject("{flag:1}") ;
}else if(songs.equals("2")) {
js=new JSONObject("{flag:2}") ;
}else if(songs.equals("3")) {
js=new JSONObject("{flag:3}") ;
}
response.getOutputStream().write(js.toString().getBytes("utf-8"));老师你看这个
JSP文件的问题：
1、三个按钮要设置id值，而且每个按钮的id值不能一样，name值也不能一样，而且需要用引号括起来
2、$（）小括号里面应该是#id的值
3、function后面要有一对小括号
4、单词拼写错误，jsion改成json
5、url：后面AjaxServlet前面写上<%=path%>/，另外去掉.java
6、songtype:$("input[name=songs]").val(),//传递给Servlet的值，val(),后面的逗号去掉。data{}大括号后面写逗号
Servlet的问题：
1、@WebServlet("/AiaxServlet")，名字写错了，应该是AjaxServlet
2、getPararmeter方法中的参数应该是按钮的name值，而且这个方法是不能获取value值的。
可以一个按钮写一个类似的脚本 $("#song1").click(function(){}，如果先用一个servlet，那么就传个参数，比如url:"<%=path%>/AjaxServlet",写成url:"<%=path%>/AjaxServlet?type=1",type=1时就代表流行歌曲，可以使用getParameter("type");取到值，然后判断是否为1
可以尝试完成一下，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星