你所在位置:首页Javascript开发 → JQuery框架和Ajax的综合使用

JQuery框架和Ajax的综合使用

发布时间:2019-07-11

JQuery是一个优秀的javascript轻量级框架,其口号是:write less,do more
本实例没有什么具体的意义,但是可以很好的理解如何综合使用JQuery和ajax
在学习该实例前,请确保下载了jquery.js 文件,让后放到你的web工程中(至于怎么放,我就不再多说了,相信有过web开发经验的同学都很清楚)
 
注意:不同的运行该实例,可能有不同的效果,最好在ie上面运行
 
运行界面如下:

 
对于方式一,我是使用大多JQuery.ajax()函数实现的,对于方式二 我是通过JQuery.get(),JQuery.post()方式完成的。
 
先将.文件代码拷贝进来:
 
[html]
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
        //当dom加载完成时,就会调用ready方法,在此时,为四个按钮分别添加onclick方法 
        $("#btn1").click(function(){ 
             $.ajax({ 
             type:"GET",//注意: 此处使用的get方法发送的 
             url:"MyServlet", 
             dataType:"html", 
             success:function(data)//相当于之前文章讲解的ajax中的回调函数,就是说如果请求成功,那么就会执行该函数,其中dada便是从服务器发送回来的数据 
             { 
                alert(data); 
                 $("#p1").html(data);//jquery语法,找到id为p1的标签,然后放data放入到标签中 
             } 
             }); 
              
              
        }); 
         
        $("#btn2").click(function(){ 
         
            $.ajax({ 
            type:"POST",//通过post方法发送 
            url:"MyServlet", 
            dataType:"html",///返回类型是html 
            success:function(data) 
            { 
                //alert(data); 
                $("#p1").html(""); 
                $("#p1").html(data); 
            } 
             
            }); 
        }); 
         
        $("#btn3").click(function(){ 
         
            $.get("MyServlet",function(data){ 
                alert(data); 
                $("#p1").html(data); 
            }); 
             
            }); 
             
                $("#btn4").click(function(){ 
         
                $.post("MyServlet",function(data){ 
                    $("#p1").html(data);// 
                }); 
        }); 
}); 
         
         
     
         
 
 
    </script> 
  </head> 
   
  <body> 
  <p>方式一</p> 
   <input type="button" id="btn1" value="使用Get方法获取服务器端的内容"><br> 
   <input type="button" id="btn2" value="使用Post方法获取服务器内容"> <br> 
   <hr> 
   <p>方式二</p> 
     <input type="button" id="btn3" value="使用Get方法获取服务器端的内容"><br> 
     <input type="button" id="btn4" value="使用Post方法获取服务器内容"> <br> 
    
    
   <p id="p1"></p> 
   <hr> 
    
  </body> 

上面的代码都有注释,在此就不多做解释,不懂的地方可以留言
 
下面就开始编写servlet代码
[java] 
public class MyServlet extends HttpServlet 

 
    /**
     * Destruction of the servlet. <br>
     */ 
    public void destroy() 
    { 
        super.destroy(); // Just puts "destroy" string in log 
        // Put your code here 
    } 
 
     
    public void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException 
    { 
 
        response.setContentType("text/html"); 
        PrintWriter out = response.getWriter(); 
        out.println("Hello world"); 
        out.flush(); 
        out.close(); 
    } 
 
     
    public void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException 
    { 
 
        System.out.println("post方法执行了"); 
        response.setContentType("text/html"); 
        PrintWriter out = response.getWriter(); 
        out.println("Good Morning"); 
        out.flush(); 
        out.close(); 
    } 
 
    /**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occurs
     */ 
    public void init() throws ServletException 
    { 
        // Put your code here 
    } 
 

servlet代码比较简单,无非就是改写了get方法,post方法
作者:yuanzeyao2008


上一篇:ExtJS中Ext.menu.Menu菜单应用
下一篇:jQuery在异步请求数据返回后,调用$("selector").),不能显示内容的问题解决办法