JQuery框架跟Ajax的综合使用
日期：2014-05-16 浏览次数：20635 次
JQuery框架和Ajax的综合使用
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方法
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
