jQueryAjax学习心得

最新推荐文章于 2021-08-05 14:44:48 发布

放开那只哈士奇

最新推荐文章于 2021-08-05 14:44:48 发布

阅读量935

点赞数

分类专栏： ajax相关

本文链接：https://blog.csdn.net/iamhaizhong/article/details/27492481

版权

ajax相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQueryAjax使用起来非常方便,简单易用,整理了一些内容和大家分享一下:

页面代码:

  <body>
    <form action="oneServlet" method="post" id="form">
    	姓名:<input type="text" name="name" /><br/>
    	年龄:<input type="text" name="age" /><br/>
    </form>
    <input type="button" value="提交" id="load" />
    <div id="show"></div>
  </body>

后台代码:

package com.zb.servlet;


import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class OneServlet extends HttpServlet {

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		PrintWriter out = response.getWriter();
		out.print("您的姓名是:"+name+";今年"+age+"岁;");
		out.flush();
		out.close();
	}
	
}

1.使用load实现Ajax:

<script type="text/javascript">
  	$("#load").click(function(){
  		$("#show").load("oneServlet",$("#form").serializeArray());
  	});
  </script>

2.使用$.ajax({})实现Ajax:

<script type="text/javascript">
	$("#load").click(function(){
		$.ajax({url:"oneServlet",data:$("#form").serializeArray()})
		.done(function(data,statusText){
			$("#show").empty;
			$("#show").append("服务器响应状态:"+statusText);
			$("#show").append(data);
		})
		.fail(function(){
			alert("响应失败");
		})
	});
  </script>

这两种方式都可以简单的将后台响应内容在<div id="show"></div>中显示出来,只是load方法无需指定回调函数;

记得刚开始用jQueryAjax的时候代码是这样写的:

<script type="text/javascript">
	$("#load").click(function(){
		$.ajax({
			url:"oneServlet",
			data:$("#form").serializeArray(),
			success:function(msg){...},
			error:function(){...}
		})
	});
  </script>

需要指定success和error属性来执行调用成功或调用失败的函数,而从jQuery1.5开始,$.ajax()方法返回的是一个叫Deferred的对象,可以通过done()方法来执行调用成功的函数,通过fail()方法来执行调用失败的函数,这两种方式其实同样都能实现想要的效果,不过就如同jQuery封装DOM对象给我们操作一样,Deferred对象也是经过封装的,统一处理回调函数的对象而已.喜欢用哪种还是仁者见仁智者见智.