首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

请各位老师给看看,做的是jQuery对ajax 的支持,该如何解决

2013-01-25 
请各位老师给看看,做的是jQuery对ajax 的支持问题是这样的:我按照课件上面的例子,对项目进行了部署,但是在

请各位老师给看看,做的是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;
}
}
这是类car


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();
}
}
}
这是action里面的内容


<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>

这是jsp页面


<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>

这是web页面,console也没报错,到页面上就是一点反应都没有,还请看看是哪里出现的问题
[解决办法]

<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>



好多符号不对,注意中英文,还有函数里面写的不对,不是 'url' 而是 url 没有单引号,其它同样。
[解决办法]
             });
              });
          });


             });


              });
          });
最后这几个 ; 也不对,自己改下 改成;

热点排行