您的位置：首页 > Web前端 > JQuery

JQuery和Ajax的综合应用

2012-07-31 16:32 495 查看

JQuery是一个优秀的javascript轻量级框架，其口号是:write less,do more,关于该框架的更多内容请参考：http://jquery.org

本实例没有什么具体的意义，但是可以很好的理解如何综合使用JQuery和ajax

在学习该实例前，请确保下载了jquery.js 文件，让后放到你的web工程中（至于怎么放，我就不再多说了，相信有过web开发经验的同学都很清楚）

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

运行界面如下：

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

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery ajax 框架 function button 服务器

相关文章推荐

新的分享

章节导航