JQuery框架和Ajax的综合使用

12-08-01 来源：[db:作者]

收藏我要投稿

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

注意：不同的浏览器运行该实例，可能有不同的效果，最好在ie上面运行

运行界面如下：

对于方式一，我是使用大多JQuery.ajax()函数实现的，对于方式二　我是通过JQuery.get(),JQuery.post()方式完成的。

先将.jsp文件代码拷贝进来：

[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);
                 $("#div1").html(data);//jquery语法，找到id为div1的标签，然后放data放入到标签中
             }
             });


        });

        $("#btn2").click(function(){

            $.ajax({
            type:"POST",//通过post方法发送
            url:"MyServlet",
            dataType:"html",///返回类型是html
            success:function(data)
            {
                //alert(data);
                $("#div1").html("");
                $("#div1").html(data);
            }

            });
        });

        $("#btn3").click(function(){

            $.get("MyServlet",function(data){
                alert(data);
                $("#div1").html(data);
            });

            });

                $("#btn4").click(function(){

                $.post("MyServlet",function(data){
                    $("#div1").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>


   <div id="div1"></div>
   <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

点击复制链接与好友分享!回本站首页