Jquery Ajax访问servlet或action

       昨天看完了项目需求,本想今天自己试着建好pojo,用hibernate配置表之间的关系,且映射到数据库。后来想还是复习下ajax吧,时间长了怕忘记。  
      上周花了一天时间才实现Jquery访问servlet,传递数据进servlet,并从servlet返回数据给页面显示,直接上代码:
      jquery和登陆页面,页面为jsp:

<script>  
$(document).ready(function(){  
  $("#btn1").click(function(){//点击提交按钮,触发函数   
    $.post(                   //post,比get的好处就不多说了   
    "servlet/Ajax",           //提交的servlet   
    {  
      name:$('#username').val(),  //获取输入框中的数据   
      password:$("#password").val()  
    },  
    function(data,status){   //获得servlet返回的数据,如何返回,在serlvet中会详写   
     $("#Result tr:gt(0)").remove();//清除表格第一行以下的所有数据   
     $("#Result").append(data);     //将servlet中排好格式的数据 显示到表格中   
    });  
  });  
});  
</script>
<body>
    用户名:<input id="username" type="text" />
    密  码:<input type="password" id="password" />
      <input type="submit" id="btn1" value="提交"/> 
      <br>
     数据显示:
    <table id="Result">
            <tr> <td>Id</td> <td>姓名</td> </tr>
    </table>
</body>

执行流程详解:这是个登陆页面,点击“提交”按钮,请求会被script接收,Jquery获取用户名和密码,并提交到 servlet/Ajax,function(data,status){}获得回调的数据, $("#Result").append(data)是将获得的数据显示到id为Result的document对象,但此时会有个问题,就是重复点击提交按钮,data数据会被累加到table中,会造成数据重复,所以需要先清空table中的数据,$("#Result").remove(),但使用这种方法会同时清空table的表头,而表头是我们需要保留的,所以改为$("#Result tr:gt(0)").remove();清除表格除第一行以外的数据,这样就完美了,perfect。

再来看servlet中的代码:

 public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("执行了login servlet dopost()");
        String name = request.getParameter("name");
        String pass = request.getParameter("password");
        System.out.println(name + " " + pass);
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8"); //需设置,否则返回的汉字在页面会出问题
        PrintWriter out = response.getWriter();
        StringBuilder sb = new StringBuilder(); //编辑好页面table中显示的格式,
        sb.append("<tr><td>");
        sb.append(1);
        sb.append("</td><td>");
        sb.append("haitun1");
        sb.append("</td></tr>");   
          
        sb.append("<tr><td>");
        sb.append(2);
        sb.append("</td><td>");
        sb.append("haitun2");
        sb.append("</td></tr>");     
        String str = sb.toString(); 
        out.print(str);    //将string传给jquery,由Jquery回调函数中的data接收
    }

好,完成,仅仅展示了如何使用Jquery传数据给servlet,并将回调数据显示到页面的table中。对于初学者来说,至少已经解决了Jquery和servlet数据互传的基本问题。
点击提交前的页面:

点击提交后的页面:

Jquery Ajax访问servlet或action

实现了局部刷新,分页时当然要使用到。

你可能感兴趣的:(Jquery Ajax访问servlet或action)