ajax发送get、post请求

前端之家收集整理的这篇文章主要介绍了ajax发送get、post请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

第一种方式:

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


第二种方式(接受JSON包):

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

  1. //Servlet代码@H_404_29@
  2. publicclassUser{@H_404_29@
  3. publicStringid;@H_404_29@
  4. publicStringname;@H_404_29@
  5. publicStringyear;@H_404_29@
  6. publicStringspecialty;@H_404_29@
  7. publicStringphone;@H_404_29@
  8. publicStringemail;@H_404_29@
  9. }@H_404_29@
  10. @H_404_29@
  11. protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)@H_404_29@
  12. throwsServletException,IOException{@H_404_29@
  13. ObjectMappermapper=newObjectMapper();@H_404_29@
  14. Connectioncon=DBTool.getConnection();@H_404_29@
  15. Useru=newUser();@H_404_29@
  16. u.id="a";@H_404_29@
  17. u.name="b";@H_404_29@
  18. u.year="c";@H_404_29@
  19. u.specialty="d";@H_404_29@
  20. u.phone="e";@H_404_29@
  21. u.email="f";@H_404_29@
  22. response.setContentType("application/json");@H_404_29@
  23. }@H_404_29@

第三种方式(接受JSON包,返回值为集合):
[javascript] view plain copy print ?
  1. //JS代码@H_404_29@
  2. $.ajax({@H_404_29@
  3. url:"CheckAllStudent",@H_404_29@
  4. contentType:'application/json',@H_404_29@
  5. mimeType:'application/json',@H_404_29@
  6. success:function(data){@H_404_29@
  7. $.each(data,function(index,student){@H_404_29@
  8. varstring="<tr>";@H_404_29@
  9. string+="<td>"+student.id+"</td>";@H_404_29@
  10. string+="<td>"+student.name+"</td>";@H_404_29@
  11. string+="<td>"+student.year+"</td>";@H_404_29@
  12. string+="<td>"+student.specialty+"</td>";@H_404_29@
  13. string+="<td>"+student.phone+"</td>";@H_404_29@
  14. string+="<td>"+student.email+"</td>";@H_404_29@
  15. $("tbody").append(string);@H_404_29@
  16. });@H_404_29@
  17. },@H_404_29@
  18. });@H_404_29@
  1. //Servlet代码@H_404_29@
  2. protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)@H_404_29@
  3. throwsServletException,IOException{@H_404_29@
  4. ObjectMappermapper=newObjectMapper();@H_404_29@
  5. //把相同的对象放入List中@H_404_29@
  6. List<User>list=newArrayList<User>();@H_404_29@
  7. Useru1,u2,u3;@H_404_29@
  8. list.add(u1);@H_404_29@
  9. list.add(u2);@H_404_29@
  10. list.add(u3);@H_404_29@
  11. response.setContentType("application/json");@H_404_29@
  12. mapper.writeValue(response.getOutputStream(),list);@H_404_29@
  13. }@H_404_29@


第四种方式(ajax方法,带参数):

[javascript] view plain copy print ?
  1. $.ajax({@H_404_29@
  2. url:"ShowAdvertise",@H_404_29@
  3. type:'POST',@H_404_29@
  4. data:{time:time},@H_404_29@
  5. success:function(data){@H_404_29@
  6. alert(data);@H_404_29@
  7. },@H_404_29@
  8. });@H_404_29@

参考文献:

jQuery ajax - ajax() 方法

原文链接:https://www.f2er.com/ajax/164906.html

猜你在找的Ajax相关文章