ajax可以发送post或者get请求,并且可以设置同步或者异步,这里罗列了几种。其中,后台处理请求由servlet实现。
第一种方式:
- varxmlhttp=newXMLHttpRequest();@H_404_29@
- //发送post请求,false表示发送同步请求@H_404_29@
- xmlhttp.open("POST","AdminLogin",false);@H_404_29@
- //设置文件的头,UTF-8应与html编码格式一致,告诉浏览器对参数编码的格式,可以解决中文传输乱码的问题@H_404_29@
- xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");@H_404_29@
- //设置传递的参数@H_404_29@
- xmlhttp.send("id="+id+"&password="+password);@H_404_29@
- //显示返回结果@H_404_29@
- alert(xmlhttp.responseText);@H_404_29@
第二种方式(接受JSON包):
- //使用ajax方法,JS代码@H_404_29@
- $.ajax({@H_404_29@
- url:"GetStudentInfo",@H_404_29@
- type:'POST',@H_404_29@
- async:false,@H_404_29@
- contentType:'application/json',@H_404_29@
- mimeType:'application/json',@H_404_29@
- success:function(data){//对返回值的处理@H_404_29@
- $("#id").val(data.id);@H_404_29@
- $("#name").val(data.name);@H_404_29@
- $("#year").val(data.year);@H_404_29@
- $("#specialty").val(data.specialty);@H_404_29@
- $("#phone").val(data.phone);@H_404_29@
- $("#email").val(data.email);@H_404_29@
- },@H_404_29@
- });@H_404_29@
- //Servlet代码@H_404_29@
- publicclassUser{@H_404_29@
- publicStringid;@H_404_29@
- publicStringname;@H_404_29@
- publicStringyear;@H_404_29@
- publicStringspecialty;@H_404_29@
- publicStringphone;@H_404_29@
- publicStringemail;@H_404_29@
- }@H_404_29@
- @H_404_29@
- protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)@H_404_29@
- throwsServletException,IOException{@H_404_29@
- ObjectMappermapper=newObjectMapper();@H_404_29@
- Connectioncon=DBTool.getConnection();@H_404_29@
- Useru=newUser();@H_404_29@
- u.id="a";@H_404_29@
- u.name="b";@H_404_29@
- u.year="c";@H_404_29@
- u.specialty="d";@H_404_29@
- u.phone="e";@H_404_29@
- u.email="f";@H_404_29@
- response.setContentType("application/json");@H_404_29@
- }@H_404_29@
第三种方式(接受JSON包,返回值为集合):
- //JS代码@H_404_29@
- $.ajax({@H_404_29@
- url:"CheckAllStudent",@H_404_29@
- contentType:'application/json',@H_404_29@
- mimeType:'application/json',@H_404_29@
- success:function(data){@H_404_29@
- $.each(data,function(index,student){@H_404_29@
- varstring="<tr>";@H_404_29@
- string+="<td>"+student.id+"</td>";@H_404_29@
- string+="<td>"+student.name+"</td>";@H_404_29@
- string+="<td>"+student.year+"</td>";@H_404_29@
- string+="<td>"+student.specialty+"</td>";@H_404_29@
- string+="<td>"+student.phone+"</td>";@H_404_29@
- string+="<td>"+student.email+"</td>";@H_404_29@
- $("tbody").append(string);@H_404_29@
- });@H_404_29@
- },@H_404_29@
- });@H_404_29@
- //Servlet代码@H_404_29@
- protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)@H_404_29@
- throwsServletException,IOException{@H_404_29@
- ObjectMappermapper=newObjectMapper();@H_404_29@
- //把相同的对象放入List中@H_404_29@
- List<User>list=newArrayList<User>();@H_404_29@
- Useru1,u2,u3;@H_404_29@
- list.add(u1);@H_404_29@
- list.add(u2);@H_404_29@
- list.add(u3);@H_404_29@
- response.setContentType("application/json");@H_404_29@
- mapper.writeValue(response.getOutputStream(),list);@H_404_29@
- }@H_404_29@
第四种方式(ajax方法,带参数):
参考文献: