<title>测试Ajax</title><script type="text/javascript" src="jquery-1.10.1.js"></script><script type="text/javascript"> ???$(function(){ ???????$("#xxx").blur(function(){ ???????????var value = $(‘#xxx‘).val(); ???????????$.ajax({ ???????????????url:"/java_web02/AjaxServlet", ?//要请求服务器的url ???????????????data:{val:value}, ??//这是一个对象,表示请求参数val=xx, 服务器端可以使用request.getParameter()来获取 ???????????????async:true, //是否为异步请求 ???????????????cache:false, ???//是否缓存结果 ???????????????type:"POST", ???//请求方式 ???????????????dataType:"json", ???//服务器返回的数据是什么类型 ???????????????success:function(result){//这个函数在服务器执行成功时会被调用,参数result就是服务器返回的值 ???????????????????$(‘label‘).text(result.name + "," + result.age); ???????????????} ???????????}); ???????}); ???});</script></head><body> ???用户名:<input type="text" name="name" id="xxx"/><label></label><br /> ???年龄:<input type="text" name="age" /></body>
2,servlet
@WebServlet("/AjaxServlet")public class AjaxServlet extends HttpServlet { ???private static final long serialVersionUID = 1L; ???protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????//设置编码格式 ???????request.setCharacterEncoding("utf-8"); ???????response.setContentType("text/html;charset=utf-8"); ???????//获取前台传来的数据 ???????String value = request.getParameter("val"); ???????if(value.equals("xiaoxiao")){ ???????????String str = "{\"name\":\"好人\", \"age\":23}"; ??//用\来转义 ???????????response.getWriter().print(str); ???????}else { ???????????String str = "{\"name\":\"坏人\", \"age\":89}"; ???????????response.getWriter().print(str); ???????} ???} ???protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????doGet(request, response); ???}}
Ajax提交数据
原文地址:http://blog.51cto.com/13416247/2066742