请各位老师给看看,做的是jQuery对ajax 的支持
问题是这样的:我按照课件上面的例子,对项目进行了部署,但是在页面上点击的时候一点反应都没有
下面是代码:
这是类car
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;
}
}
这是action里面的内容
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();
}
}
}
这是jsp页面
<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>
<bodystyle="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>
});
});
最后这几个 ; 也不对,自己改下 改成;