请问老师jQuery的问题

代码如下，请问老师，我在servlet中使用System.out.println(request.getParameter("category")，每次刷新浏览器总是出现三个category对应的值，请问问题出在哪里？

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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">
<script type="text/javascript" src="resources/js/jquery-1.4.2.js"></script>
<style type="text/css">
input {
   width: 160px;
   height: 20px;
}
.input{
   text-align:center;
}
</style>
<title>播放列表查看</title>
</head>
<body>
   <%
       String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
       request.setAttribute("basePath", basePath);
   %>
   <div class="input">
       <input type="button" id="input1" value="流行歌曲" /> <input type="button" id="input2" value="经典歌曲" />
       <input type="button" id="input3" value="摇滚歌曲" />
   </div>
   <div class="content"></div>
</body>
<script type="text/javascript">
   function display(name){
       if(typeof(name)=='string'){
           $.ajax({
               url:"<%=basePath%>displayServlet",
               type:"post",
               data:{category:$(name).val()},
               dataType:"json",
               success:function(result){
                   $(".content").text(result.respon);
               }
           });
       }
   }
   $("#input1").click(display("#input1"));
   $("#input2").click(display("#input2"));
   $("#input3").click(display("#input3"));
</script>
</html>

return浪里个浪 2018-05-18

源自：Ajax入门 2-1 使用Ajax实现登录的局部刷新

收起

4回答

好帮手慕珊回答被采纳获得+3积分 2018-05-20 12:00:11

这三行代码直接写到了<script>标签中，那么每次刷新页面就会依次执行一遍。

改成如下形式：

$("#input1").click(function(){

display("#input1");

});

祝学习愉快！

收起回答

return浪里个浪提问者 #1

非常感谢！

2018-05-20 14:16:52

提问者 return浪里个浪 2018-05-18 21:17:58

如上图，在点击刷新时，console台就会立即有显示

收起回答

提问者 return浪里个浪 2018-05-18 21:11:28

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;

/**
* Servlet implementation class displayServlet
*/
@WebServlet("/displayServlet")
public class displayServlet extends HttpServlet {
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       request.setCharacterEncoding("utf-8");
       String category=request.getParameter("category");
       System.out.println(category);
//       JSONObject jsonObject;
//
//       if(category.equals("流行歌曲")){
//           jsonObject=new JSONObject("{respon:<h1>稻香</h1><h1>晴天</h1><h1>告白气球</h1>}");
//       }else if(category.equals("经典歌曲")){
//           jsonObject=new JSONObject("{respon:<h1>千千阙歌</h1><h1>傻女</h1><h1>七友</h1>}");
//       }else{
//           jsonObject=new JSONObject("{respon:<h1>一块红布</h1><h1>假行僧</h1><h1>新长征路上的摇滚</h1>}");
//       }
//       response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));
   }


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

}

收起回答

好帮手慕阿莹 2018-05-18 18:03:13

请同学把Servlet的代码也贴一下。建议把出现问题的时候也截图贴一下，祝学习愉快

收起回答

提问者 return浪里个浪 #1

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("/displayServlet") public class displayServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String category=request.getParameter("category"); System.out.println(category); // JSONObject jsonObject; // // if(category.equals("流行歌曲")){ // jsonObject=new JSONObject("{respon:<h1>稻香</h1><h1>晴天</h1><h1>告白气球</h1>}"); // }else if(category.equals("经典歌曲")){ // jsonObject=new JSONObject("{respon:<h1>千千阙歌</h1><h1>傻女</h1><h1>七友</h1>}"); // }else{ // jsonObject=new JSONObject("{respon:<h1>一块红布</h1><h1>假行僧</h1><h1>新长征路上的摇滚</h1>}"); // } // response.getOutputStream().write(jsonObject.toString().getBytes("utf-8")); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }

2018-05-18 21:11:06