form属性method="get/post"的两种方式对比

B/S应用程序中,前台与后台的数据交互,都是通过HTMLForm表单完成的。Form提供了两种数据传输的方式——getpost。虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响。虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一些差异,但是了解二者的差异在以后的编程也会很有帮助的。

  Form中的getpost方法,在数据传输过程中分别对应了HTTP协议中的GETPOST方法。二者主要区别如下:

  1Get是用来从服务器上获得数据,而Post是用来向服务器上传递数据。

  2Get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;Post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL

  3Get是不安全的,因为在传输过程,数据被放在请求的URL中,而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中,然后放在某个地方,这样就可能会有一些隐私的信息被第三方看到。另外,用户也可以在浏览器上直接看到提交的数据,一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。

  4Get传输的数据量小,这主要是因为受URL长度限制;而Post可以传输大量的数据,所以在上传文件只能使用Post(当然还有一个原因,将在后面的提到)。

  5Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集。

  6GetForm的默认方法。

.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示。

*.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的限制,只能传递大约1024字节.

*.Post顾名思义,就是为了将数据传送到服务器段,Get就是为了从服务器段取得数据.Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post的信息作为http请求的内容,而Get是在Http头部传输的。

7. 建议:除非你肯定你提交的数据可以一次性提交,否则请尽量用 Post 方法

建议:出于安全性考虑,建议最好使用 Post 提交数据

在JavaScript中,你可以使用`XMLHttpRequest`对象或者现代浏览器提供的`fetch()`函数来通过GET或POST方法提交表单数据。以下是两种常见的方法: 1. **使用XMLHttpRequest (GET)**: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'your-url?param1=value1&param2=value2'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText); } }; ``` 在这个例子中,GET请求将包含查询字符串的形式发送。 2. **使用XMLHttpRequest (POST)**: ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'your-api-url'); xhr.setRequestHeader('Content-Type', 'application/json'); // 或者 'application/x-www-form-urlencoded' 如果数据是键值对形式 // JSON 数据 var data = { key1: 'value1', key2: 'value2' }; xhr.send(JSON.stringify(data)); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText); } }; ``` 对于POST方法,你需要设置正确的Content-Type,并且通常会发送JSON格式的数据,而不是直接在URL中显示。 3. **使用fetch (GET or POST)**: ```javascript fetch('your-url', { method: 'GET', // 或者 'POST', headers: { 'Content-Type': 'application/json' // 或者 'application/x-www-form-urlencoded' }, body: JSON.stringify({ your_data_here }) // 只有在POST时需要 }) .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` fetch API的语法更简洁,但是不是所有旧版浏览器都支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值