POST方式发送ajax请求详解

最新推荐文章于 2023-07-17 11:54:28 发布
最新推荐文章于 2023-07-17 11:54:28 发布
阅读量2.7w 收藏 6
点赞数 1
分类专栏： Javascript Ajax

POST方式发送ajax请求详解

原文地址：http://04101334.iteye.com/blog/637695

        在开始讲解之前，我假设你已经对ajax的基本原理有一定的理解，如果还有哪位朋友不怎么了解的话，

请点击这里：http://04101334.iteye.com/blog/631257

①post和get

        首先我们先讲解下post和get发送方式的特点， GET 方法提交数据不安全，数据置于请求行，客户端地址栏可见; GET 方法提交的数据大小限制在255 个字符之内。为了验证以上说法，我们接下来做个试验。首先看如下代码：

 

Html代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <title>test-get_post</title>  
  5. </head>  
  6. <body>  
  7. <form name="Login" method="get" action="test.jsp">  
  8. User ID: <input type="text" name="name"><br>  
  9. Password: <input type="password" name="password">  
  10. <input type="HIDDEN" name="from" value="welcome">  
  11. <input type="submit" value="submit">  
  12. </form>  
  13. </body>  
  14. </html>  

 接着我们输入一些数据，然后点击submit，如下图：


                                               图1-1
 接下来我们再来看一下提交的这个http请求的详细信息：


                                                                      图1-2

 由于上图我们可以看出，使用get方式发送的http请求，参数都是直接跟在URL后面清晰可见的，而且我们也不难看出，该http请求的body部分也是空的，只有head部分显示了一个http的基本信息。关于 GET 方法提交的数据大小是否限制在255 个字符之内，这里就不再做实验了，大家可以自己去实验。

 

接下来我们来看看POST 方法是如何提交数据的，POST方法提交的数据置于消息主体内，客户端不可见， POST 方法提交的数据大小没有限制。我们对以上html稍做修改如下：

Html代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <title>test-get_post</title>  
  5. </head>  
  6. <body>  
  7. <form name="Login" method="Post" action="test.jsp">  
  8. User ID: <input type="text" name="name"><br>  
  9. Password: <input type="password" name="password">  
  10. <input type="HIDDEN" name="from" value="welcome">  
  11. <input type="submit" value="submit">  
  12. </form>  
  13. </body>  
  14. </html>  

 接着我们输入一些数据，然后点击submit，如下图：

图1-3

 

接下来我们再来看一下提交的这个http请求的详细信息：


图1-4

由上图我们可以看出，使用post方式发送的http请求，参数不是跟在URL后面的，而是存放在http请求的body部分的，关于请求参数在http请求body中存放的形式类似get方式，见下图：


图1-5

 ②进入正题

在简单的讲述了get和post方式的特点后，我们正式进入正题，即如何以post形式向server发送ajax请求，在发送请求之前，第一个我们需要解决的问题就是如何去搜集并组织指定form表单中的数据。

 

一般来说form中存放数据的控件主要是<input>，而这个<input>type很多，如‘submit’，‘hidden’， ‘password’， ‘text’，‘checkbox’， ‘radio’等。因此第一步我们要做的就是先写一个方法，将将form中各种类型的<input>将数据值给抠出来。具体见如下代码：

Js代码  收藏代码
  1. //获取指定form中的所有的<input>对象  
  2. function getElements(formId) {  
  3.     var form = document.getElementById(id);  
  4.     var elements = new Array();  
  5.     var tagElements = form.getElementsByTagName('input');  
  6.     for (var j = 0; j < tagElements.length; j++)  
  7.         elements.push(tagElements[j]);  
  8.     return elements;  
  9. }  
 

接着我们需要获取每个input对象的name-value对，代码如下：

Js代码  收藏代码
  1. function inputSelector(element) {  
  2.   if (element.checked)  
  3.      return [element.name, element.value];  
  4. }  
  5.     
  6. function input(element) {  
  7.     switch (element.type.toLowerCase()) {  
  8.       case 'submit':  
  9.       case 'hidden':  
  10.       case 'password':  
  11.       case 'text':  
  12.         return [element.name, element.value];  
  13.       case 'checkbox':  
  14.       case 'radio':  
  15.         return inputSelector(element);  
  16.     }  
  17.     return false;  
  18. }  
 

接着我们就可以将所有这些input对象中的name-value对以图1-5中POSTDATA那样的格式组织起来。代码如下：

 

Js代码  收藏代码
  1. function serializeElement(element) {  
  2.     var method = element.tagName.toLowerCase();  
  3.     var parameter = input(element);  
  4.   
  5.     if (parameter) {  
  6.       var key = encodeURIComponent(parameter[0]);  
  7.       if (key.length == 0) return;  
  8.   
  9.       if (parameter[1].constructor != Array)  
  10.         parameter[1] = [parameter[1]];  
  11.         
  12.       var values = parameter[1];  
  13.       var results = [];  
  14.       for (var i=0; i<values.length; i++) {  
  15.         results.push(key + '=' + encodeURIComponent(values[i]));  
  16.       }  
  17.       return results.join('&');  
  18.     }  
  19.  }  
  20.     
  21. function serializeForm(formId) {  
  22.     var elements = getElements(formId);  
  23.     var queryComponents = new Array();  
  24.   
  25.     for (var i = 0; i < elements.length; i++) {  
  26.       var queryComponent = serializeElement(elements[i]);  
  27.       if (queryComponent)  
  28.         queryComponents.push(queryComponent);  
  29.     }  
  30.   
  31.     return queryComponents.join('&');  
  32. }  
 

 

接下来我们来创建一个form表单，里面包含各种input控件，代码如下：

Html代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <%@page import="java.util.Enumeration"%>  
  3. <html>  
  4. <head>  
  5. <title>test-get_post</title>  
  6. <script src="demo.js" type="text/javascript"></script>  
  7. <script type="text/javascript">  
  8. <!--//  
  9. var request = getXMLHttpRequest();  
  10. function getFormInfo() {  
  11.     var postBody = serializeForm('Login');  
  12.     var url = document.getElementById('Login').action;  
  13.     request.open("post", url, true);  
  14.     request.onreadystatechange = updatePage;  
  15.     //  
  16.     request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  
  17.     request.send(postBody);  
  18. }  
  19.   
  20. function updatePage() {  
  21.     if (request.readyState == 4) {  
  22.     if (request.status == 200) {  
  23.     var response = request.responseText;  
  24.         alert(response);  
  25.     } else  
  26.         alert("status is " + request.status);  
  27.     }  
  28. }  
  29.   
  30. //-->  
  31. </script>  
  32. </head>  
  33. <body>  
  34. <form id="Login" name="Login" method="post" action="result.jsp">  
  35. User ID: <input type="text" name="name"><br>  
  36. Password: <input type="password" name="password"><br>  
  37. sex:<input type="radio" name="sex" value="man"> man 
  38. <input type="radio" name="sex" value="woman"> woman<br>  
  39. interest:<input type="checkbox" name="interest" value="piu">PIU 
  40. <input type="checkbox" name="interest" value="dss">DSS 
  41. <input type="checkbox" name="interest" value="ddr">DDR<br>  
  42. <input type="hidden" name="from" value="welcome"><br>  
  43. <input type="button" name="submit" value="submit" onclick="getFormInfo();">  
  44. </form>  
  45. </body>  
  46. </html>  

 

另外值得注意的是，上述代码这句:

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

 

非常重要，没有这句的话，server就无法正常读取postdata中的任何数据，因为如果在 HTTP 流中传递空白和标点之类的字符，则它们在接收端可能会被错误地解释。URL 编码将 postdata 中不允许使用的字符转换为等效字符实体；URL 解码会反转此编码过程。例如，当嵌入到要在 URL 中传输的文本块中时，字符 < 和 > 分别被编码为 %3c 和 %3e。

接着我看一下接收端result.jsp的代码：

Html代码  收藏代码
  1. <?xml version="1.0" encoding="ISO-8859-1" ?>  
  2. <%@page import="java.util.Enumeration"%>  
  3. <%@ page language="java" contentType="text/xml; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>  
  4. <%  
  5.     String name = request.getParameter("name");  
  6.     String pwd = request.getParameter("password");  
  7.     String sex = request.getParameter("sex");  
  8.     String[] interest = request.getParameterValues("interest");  
  9.     String from = request.getParameter("from");  
  10. %>  
  11.   
  12. <validation>  
  13.     <name><%=name %></name>  
  14.     <password><%=pwd %></password>  
  15.     <sex><%=sex %></sex>  
  16.     <interest><%  
  17.         for (int i=0; i<interest.length; i++)  
  18.             out.print(interest[i] + " ");  
  19.     %></interest>  
  20.     <from><%=from %></from>  
  21. </validation>  

 最后，我们点击submit，看一下输出结果：



              到这里就差不多结束了，希望这篇文章能给大家带来一些帮助和启发，谢谢大家观赏。最后附上源码，源码大家去博主原文地址下载：http://04101334.iteye.com/blog/637695


zhengqiqiqinqin
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用ajax向服务器发起post请求（提交数据给服务器）
Forever_Hopeful的博客
06-25 4019
前端开发：网络请求后台数据，使用ajax向服务器发起post请求（提交数据给服务器）
POST方式发送ajax请求
07-14
POST方式发送ajax请求详解，并对表单数据进行封装！
ajax请求 POST丨ajax简介,ajax提交数据的多种类型
灵感与学习结合-echo
01-26 4777
Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求，服务 器返回部分数据，浏览器让你去利用这些数据对象页面做部分的更新，整个过程，页面无刷新，不打断用 户的操作。同步和异步的区别同步：如果与服务器端的交互方式是同步，当客户端与服务器交互时，客户端就不能进行其他 操作，只能等待服务器端的响应，会刷新页面。异步：当客户端正在进行正常操作时，还可以同时与服务器进行交互，服务器响应客户端信息，将 信息更新到网页局部，整个过程页面不刷新。'''
ajax学习笔记02-POST的基本使用
doulihang的博客
11-27 476
一、使用ajax发送post请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-ajax-post</title> <!-- 1.什么是ajax ajax是与服务器交换数据并更新...
Ajax：ajax发送Post请求、ajax案例
热门推荐
dengfengling999的博客
07-21 1万+
上面项目，目前存在的缺点在后端的java代码中又开始拼接HTML代码了。显然这是在后端java中写前端的HTML代码。一般后端不会这样写拼html串返回，只会在后端查数据，把数据返回交给前端。能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。我们后端的java代码能不能只返回数据？（返回数据可以采用JSON的格式，也可以采用XML的格式）一般采用JSON，因为json体积小，xml体积大，解析起来有一定难度。......
Ajax学习：Ajax发送POST请求
weixin_47295886的博客
11-28 1473
当鼠标移动到div区域的时候，发送post请求给服务端 把响应体内容在div中呈现。
详解使用fetch发送post请求时的参数处理
11-28
不考虑古董浏览器之后，使用fetch来发送ajax请求，变得非常爽快和时尚。 但是，发送post请求的时候，把笔者卡了一下。后台如下获取参数时，总是为null String q = req.getParameter("q"); 研究了好久，总算写出正确...
实例详解Android Webview拦截ajax请求
01-05
Android Webview虽然提供了页面加载及资源请求的钩子，但是对于h5的ajax请求并没有提供干涉的接口，这意味着我们不能在webview中干涉javascript发起的http请求，而有时候我们确实需要能够截获ajax请求并实现一些功能...
详解React Native 采用Fetch方式发送跨域POST请求
11-30
Fetch以后是趋势，势必要取代传统的Ajax，而且RN框架...//发送Ajax请求 sendAjax(){ //POST方式,IP为本机IP fetch("http://192.168.111.102:8085", { method: "POST", mode: "cors", headers: { "Content-Type
Ajax中get与post请求详解
06-27
学习ajax技术的时候,很多同学对于ajax中get与post请求总是疑问不解
Ajax——发送POST请求
weixin_53052268的博客
08-13 1285
1.需求：鼠标移过div方框会将请求服务器返回的结果打印在div内。3.POST设置请求参数。
Ajax发送get请求和post请求的比较
m0_64231944的博客
05-20 830
Ajax发送get请求和post请求的比较、为什么在Ajax中需要为post请求设置响应头，底层实现原理；使用Ajax做一个登陆验证项目、为什么在Ajax中需要为post请求设置响应头，而get请求不需要
JavaScript学习 -- ajax方法的POST请求
weixin_41489908的博客
07-17 3243
本文介绍了如何使用jQuery发送POST请求，并提供了简单和带标头信息的请求的实际示例。使用jQuery可以方便地向服务器发送数据，并等待响应。在实际开发中，我们通常会使用POST请求来提交表单数据、发送文件或与服务器进行交互。
AJAX发送POST请求
Java_young_man的博客
03-22 7067
AJAX发送POST请求 需求： 当鼠标移入到页面div当中，页面向服务端发送POST请求，服务端将响应结果作为显示体在div中显现出来 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
APIPOST入门+认识接口（前后端分离）
SpongeBob_shouse的博客
03-01 3282
apipost基本使用和接口理解
Ajax 发送post请求
m0_64355119的博客
05-09 118
post请求设置请求头xhr.setRequestHeader('Content-type',"application/x-www-form-urlencoded")
Ajax发送post请求
欢迎光临我的主页
04-27 896
需求：鼠标放在框框里的时候，向服务端发送请求，结果回来之后，把响应体结果呈现在div中 html文件中写ajax代码，并运行 解决办法： //在js中新增 app.post('/server',(request,response)=>{ //设置响应头。（'名字','值'） 设置允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); //设置响应体 response.send('HELLO AJAX
教你怎么用最原始的ajax发送post请求和get请求
郝老三~~~~~~~~~~~~~
10-07 1380
最近分配了一个小需求，修改一下官网的静态html网页，让其可以进行调用接口，获得接口返回信息，从而获得网页的动态性。
使用 $.ajax 发送 post 请求
beitian_123的博客
09-05 6912
1.摘要 刚开始学习jquery的时候，按照书上的例子发送POST请求始终失败，而发送GET请求却能够成功，在后台（java侧）使用@RequestBody将请求转换成json格式始终失败，查看了各种帖子始终不成功 。后来发现是页面转换json有问题，特将过程整理至此，希望对读者有益。 2. 通过页面发送POST请求 其代码对应如下 <!DOCTYPE html>...
$.ajax表单参数详解
最新发布
02-29
- async：指定是否使用异步方式发送请求，默认为true。 - timeout：设置请求超时时间，单位为毫秒。 - cache：指定是否缓存请求结果，默认为true。 - headers：设置请求头信息，可以是一个对象或者函数。 以上是$....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值