jQuery中ajax的用法
Posted wangjian_an
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中ajax的用法相关的知识，希望对你有一定的参考价值。
Query是继prototype之后又一个优秀的javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理html（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
jquery==$
使用方法：
$(function()
在这里写jquery代码
基本的操作请查看API
jQuery中ajax的用法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery-Ajax的基本用法</title>
<script type="text/javascript" src="<c:url value='/js/jquery-1.7.js'/>"></script>
<script type="text/javascript">
$(function()
$("#btn1").click(function()
var url="<c:url value='/GetServlet'/>";
/* jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] ) */
$.get(url, "name": "John", time: "2pm" ,function(data,text,xhr)//与没有引号都行
alert(data);
);
);
$("#btn2").click(function()//支持中文
var url="<c:url value='/GetServlet'/>";
/* jQuery.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] ) */
$.post(url, "name": "大哥王", time: "2pm" ,function(data,text,xhr)//与没有引号都行
alert(data);
);
);
//※2 ajax通讯,服务器应答内容为:xml
$("#btn3").click(function()
var url="<c:url value='/GetServlet'/>";
$.post(url,name:"Jack",age:29,function(data,textStatus,xhr)
//alert(data); //◆◆返回的data是:xmlDocument对象
$(data).find("user").each(function(idx)
//$.each($(data).find("user"),function(idx)都可以
var name=$(this).find("name").first().text();
var name2=$(this).find("name:first").text();
var name3=$(this).find("name:eq(0)").text();
var name4=$(this).find("name").eq(0).text();
alert(name+","+name2+","+name3+","+name4);
);
,"xml");//相比前面，此处增加了一个参数：xml ----若不给该参数，则由系统自动判断，一般识别为字符串
);
//※3 ajax通讯,服务器应答内容为:json
$("#btn4").click(function()
var url="<c:url value='/JsonServlet'/>";
$.post(url,name:"Jack",age:29,function(data,textStatus,xhr)
alert($(data)); //◆◆返回的json
var addr=data["addr"];//map读取
//var addr=data[0];不行
alert(addr);
//for(var i=0;i<data.length;i++)//list
//alert(data[i].id+","+data[i].name+","+data[i].age);
//
,"json");//相比前面，此处增加了一个参数：xml ----若不给该参数，则由系统自动判断，一般识别为字符串
);
);
</script>
</head>
<body>
<input id="btn1" type="button" value="GET-Ajax" />
<br />
<input id="btn2" type="button" value="POST-Ajax" /><br />
<input id="btn3" type="button" value="POST-Ajax-XMl" /><br />
<input id="btn4" type="button" value="POST-Ajax-Json" /><br />
</body>
</html>GetServlet
package cn.hncu.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 GetServlet extends HttpServlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
String time=request.getParameter("time");
System.out.println("name:"+name+" time"+time);
out.print("name:"+name+" time:"+time);
out.close();
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
String time=request.getParameter("time");
System.out.println("name:"+name+" time"+time);
String xml="<user><name>"+name+"</name><age>"+request.getParameter("age")+"</age></user>";
out.print(xml);
out.close();
JsonServlet
package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import cn.hncu.domain.User;
public class JsonServlet extends HttpServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
List<User> users = new ArrayList<User>();
users.add(new User("A001","Jack",20));
users.add(new User("A002","Rose",22));
users.add(new User("B001","张三",20));
users.add(new User("B002","李四",30));
//用fastjson工具(只有一个jar包)帮我们把list转换成json串
String json=JSONArray.toJSONString(users);
String strJson=json.toString();
//System.out.println(strJson);
Map<String, Object> map = new HashMap<String, Object>();
map.put("addr", "湖南");
map.put("height", "170");
map.put("marry", "no");
map.put("user", new User("A003","小李",25));
String obj = JSONObject.toJSONString(map);
System.out.println(obj.toString());
out.print(obj);
以上是关于jQuery中ajax的用法的主要内容，如果未能解决你的问题，请参考以下文章
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
深入理解jQuery中$.get$.post$.getJSON和$.ajax的用法