ajax发送get、post请求

ajax可以发送post或者get请求，并且可以设置同步或者异步，这里罗列了几种。其中，后台处理请求由servlet实现。

第一种方式：

[javascript] view plain copy print ?

1. var xmlhttp = new XMLHttpRequest();  
2. //发送post请求，false表示发送同步请求  
3. xmlhttp.open("POST","AdminLogin",false);  
4. //设置文件的头,UTF-8应与html编码格式一致，告诉浏览器对参数编码的格式，可以解决中文传输乱码的问题  
5. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");  
6. //设置传递的参数  
7. xmlhttp.send("id="+id+"&password="+password);  
8. //显示返回结果  
9. alert(xmlhttp.responseText);  

var xmlhttp = new XMLHttpRequest();
//发送post请求，false表示发送同步请求
xmlhttp.open("POST","AdminLogin",false);
//设置文件的头,UTF-8应与html编码格式一致，告诉浏览器对参数编码的格式，可以解决中文传输乱码的问题
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
//设置传递的参数
xmlhttp.send("id="+id+"&password="+password);
//显示返回结果
alert(xmlhttp.responseText);

第二种方式（接受JSON包）：

[javascript] view plain copy print ?

1. //使用ajax方法,JS代码  
2. $.ajax({  
3.     url: "GetStudentInfo",  
4.     type: 'POST',  
5.     async: false,  
6.     contentType: 'application/json',  
7.     mimeType: 'application/json',  
8.     success: function (data) {//对返回值的处理  
9.         $("#id").val(data.id);  
10.         $("#name").val(data.name);  
11.         $("#year").val(data.year);  
12.         $("#specialty").val(data.specialty);  
13.         $("#phone").val(data.phone);  
14.         $("#email").val(data.email);  
15.     },  
16. });  

//使用ajax方法,JS代码
$.ajax({
    url: "GetStudentInfo",
    type: 'POST',
    async: false,
    contentType: 'application/json',
    mimeType: 'application/json',
    success: function (data) {//对返回值的处理
		$("#id").val(data.id);
		$("#name").val(data.name);
		$("#year").val(data.year);
		$("#specialty").val(data.specialty);
		$("#phone").val(data.phone);
		$("#email").val(data.email);
    },
});

[java] view plain copy print ?

1. //Servlet代码  
2. public class User {  
3.     public String id;  
4.     public String name;  
5.     public String year;  
6.     public String specialty;  
7.     public String phone;  
8.     public String email;  
9. }  
10.   
11. protected void doPost(HttpServletRequest request, HttpServletResponse response)  
12.     throws ServletException, IOException {  
13.     ObjectMapper mapper = new ObjectMapper();  
14.         Connection con = DBTool.getConnection();  
15.     User u = new User();  
16.     u.id = "a";  
17.     u.name = "b";  
18.     u.year = "c";  
19.     u.specialty = "d";  
20.     u.phone = "e";  
21.     u.email = "f";  
22.     response.setContentType("application/json");    
23. }  

//Servlet代码
public class User {
	public String id;
	public String name;
	public String year;
	public String specialty;
	public String phone;
	public String email;
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
	ObjectMapper mapper = new ObjectMapper();
        Connection con = DBTool.getConnection();
	User u = new User();
	u.id = "a";
	u.name = "b";
	u.year = "c";
	u.specialty = "d";
	u.phone = "e";
	u.email = "f";
	response.setContentType("application/json");  
}

第三种方式（接受JSON包，返回值为集合）：

[javascript] view plain copy print ?

1. //JS代码  
2. $.ajax({  
3.       url: "CheckAllStudent",  
4.       type: 'POST',  
5.       contentType: 'application/json',  
6.       mimeType: 'application/json',  
7.       success: function (data) {  
8.           $.each(data, function (index, student) {  
9.             var string = "<tr>";  
10.             string += "<td>" + student.id+ "</td>";  
11.             string += "<td>" + student.name+ "</td>";  
12.             string += "<td>" + student.year+ "</td>";  
13.             string += "<td>" + student.specialty+ "</td>";  
14.             string += "<td>" + student.phone+ "</td>";  
15.             string += "<td>" + student.email+ "</td>";  
16.             $("tbody").append(string);  
17.           });   
18.       },  
19. });  

//JS代码
$.ajax({
      url: "CheckAllStudent",
      type: 'POST',
      contentType: 'application/json',
      mimeType: 'application/json',
      success: function (data) {
          $.each(data, function (index, student) {
        	var string = "<tr>";
        	string += "<td>" + student.id+ "</td>";
        	string += "<td>" + student.name+ "</td>";
        	string += "<td>" + student.year+ "</td>";
        	string += "<td>" + student.specialty+ "</td>";
        	string += "<td>" + student.phone+ "</td>";
        	string += "<td>" + student.email+ "</td>";
        	$("tbody").append(string);
          }); 
      },
});

[java] view plain copy print ?

1. //Servlet代码  
2. protected void doPost(HttpServletRequest request, HttpServletResponse response)   
3.     throws ServletException, IOException {  
4.         ObjectMapper mapper = new ObjectMapper();  
5.         //把相同的对象放入List中  
6.         List<User>    list = new ArrayList<User>();  
7.         User u1,u2,u3;  
8.         list.add(u1);  
9.         list.add(u2);  
10.         list.add(u3);  
11.     response.setContentType("application/json");    
12.     mapper.writeValue(response.getOutputStream(), list);  
13. }  

//Servlet代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException {
    	ObjectMapper mapper = new ObjectMapper();
    	//把相同的对象放入List中
    	List<User>	list = new ArrayList<User>();
    	User u1,u2,u3;
    	list.add(u1);
    	list.add(u2);
    	list.add(u3);
	response.setContentType("application/json");  
	mapper.writeValue(response.getOutputStream(), list);
}

第四种方式（ajax方法，带参数）：

[javascript] view plain copy print ?

1. $.ajax({  
2.     url: "ShowAdvertise",  
3.     type: 'POST',  
4.     data: {time:time},  
5.     success: function(data) {  
6.         alert(data);  
7.     },  
8. });  

$.ajax({
	url: "ShowAdvertise",
	type: 'POST',
	data: {time:time},
	success: function(data) {
		alert(data);
	},
});

参考文献：

jQuery ajax - ajax() 方法