请各位老师给看看,做的是jQuery对ajax 的支持
问题是这样的:我按照课件上面的例子,对项目进行了部署,但是在页面上点击的时候一点反应都没有
下面是代码:
public class Car { private String name; private double price; private String desc; public Car(String name,double price,String desc){ super(); this.name = name; this.price = price; this.desc = desc; } public Car(){ super(); } public String getDesc(){ return desc; } public void setDesc(String desc){ this.desc = desc; } public String getName(){ return name; } public void setName(String name){ this.name = name; } public double getPrice(){ return price; } public void setPrice(double price){ this.price = price; }}
public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{ String uri = request.getRequestURI(); String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf(".")); if(path.equals("/crinfo")){ response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String name = request.getParameter("name"); System.out.println(name); if(name.equals("bmw520")){ Car car = new Car("bmw520",50,"还行"); JSONObject obj = JSONObject.fromObject(car); out.println(obj.toString()); }else if(name.equals("qqme")){ Car car = new Car("qqme",5,"真不错"); JSONObject obj = JSONObject.fromObject(car); out.println(obj.toString()); }else{ Car car = new Car("maiten",18,"高性能商务车"); JSONObject obj = JSONObject.fromObject(car); out.println(obj.toString()); } out.close(); } }}
<head> <title>Insert title here</title> <style> #d1{ width:300px; height:80px; background-color:#fff8dc; display:none; } </style> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function(){ $('select').change(function(){ //当change函数执行时将之前显示的东西清空 $('#d1').remove(); //ajax对象 $.ajax({ 'url': 'carinfo.do', 'type': 'post', 'data': {'name':$('#s1').val()}, 'dataType': 'json', 'success': function(data,textStatus){ // data已经被转换成了js对象 // 1.在id为s1的<select>元素后增加一个<div> $('#s1').after("<div id='d1'></div>"); // 2.该<div>元素的内容赋为“价格”和“描述” $('#d1').html('报价:' +data.price+ '<br />' +'描述:'+ data.desc); //设置该<div>动画效果 $('#d1').slideDown('slow'); setTimeout(function(){ $('#d1').slideUp('slow'); },1000); }, 'error': function(xhr,textStatus,errorThrown){ alert('系统错误'); } }); }); }); </script> </head> <body style="font-size:30px;"> <select style="width:120px;" id="s1" name="name"> <option value="bmw520">宝马520</option> <option value="qqme">QQme</option> <option value="maiten">迈腾</option> </select> </body>
<welcome-file-list> <welcome-file>carinfo.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping>
<script type="text/javascript"> $(function(){ $('select').change(function(){ //当change函数执行时将之前显示的东西清空 $('#d1').remove(); //ajax对象 $.ajax({ url: 'carinfo.do', type: 'post', data: {'name':$('#s1').val()}, dataType: 'json', success: function(data,textStatus){ // data已经被转换成了js对象 // 1.在id为s1的<select>元素后增加一个<div> $('#s1').after("<div id='d1'></div>"); // 2.该<div>元素的内容赋为“价格”和“描述” $('#d1').html('报价:' +data.price+ '<br />' +'描述:'+ data.desc); //设置该<div>动画效果 $('#d1').slideDown('slow'); setTimeout(function(){ $('#d1').slideUp('slow'); },1000); }, error: function(xhr,textStatus,errorThrown){ alert('系统错误'); } }); }); }); </script>
[解决办法]
});
});
});
});
});
});
最后这几个 ; 也不对,自己改下 改成;