传递参数格式为form |
您所在的位置：网站首页 › php传参数为数字又要求 › 传递参数格式为form |
传递参数格式为form
|
一、form-data格式
1.application/x-www-form-urlencoded 表单格式提交数据，通过form标签的action属性，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据 html: 用户名： 密码： 注册js:
2.multipart/form-data（文件上传） 这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，就要让 form 的 enctype 等于这个值。
这种方式一般用来上传文件 上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段原生 form 表单也只支持这两种方式。但是随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。 3.application/json application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。 JSON 格式支持比键值对复杂的多的结构化数据，这一点也很有用。 //js document.getElementById("register").onclick = function() { var request = new XMLHttpRequest(); request.open("POST", "test.php"); var data = { "username" :document.getElementById("username").value , "pwd" : document.getElementById("psw").value, } data=JSON.stringify(data); request.setRequestHeader("Content-type","application/json"); request.send(data); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { var data = JSON.parse(request.responseText); if (data.id) { console.log(data.msg); } else { console.log("出现错误：" + data.msg); } } else { alert("发生错误：" + request.status); } } } } //jq $("#register").click(function(){ var data={ "username": $("#username").val(), "pwd": $("#psw").val() }; data=JSON.stringify(data); $.ajax({ type: "POST", url: "test.php", data:data, dataType: "json", contentType:"application/json;charset=utf-8", success: function(data){ if (data.id) { console.log(data.msg); } else { console.log("出现错误：" + data.msg); } }, error: function(jqXHR){ alert("发生错误：" + jqXHR.status); }, }); });
4.text/xml 相比于JSON，XML不能更好的适用于数据交换，它包含了太多的包装, 而且它跟大多数编程语言的数据模型不匹配，让大多数程序员感到诧异，XML是面向数据的，JSON是面向对象和结构的，后者会给程序员一种更加亲切的感觉。 我们现在一般这样来使用： 1、XML 存储数据，存储配置文件等需要结构化存储的地方使用； 2、数据传输、数据交互使用JSON； 下面就是ajax Content-Type为text/xml的请求：
当跟后端约定前端传递参数格式为json时，我们可以通过ajax、fetch、axios，任何一种方式。 1.ajax $.ajax({ url: interfaceUrl method: 'post', dataType: 'json', contentType: "application/json;charset=utf-8", data: { }, success:funntion(data){ //请求成功 ... }, error:function(err){ //请求失败 console.log(err) } })2.axios（单独使用时需要安装） 当使用axios进行网络请求时，默认传递参数格式为json，如果想改为form-data，axios中有个方法transformRequest，此种方式也是在不传递文件的情况下可以把json对象统一转换成form-data格式 axios({ url: url, method: 'post', data: data, transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(res => { console.log("接口返回数据:", res); }) .catch(e => { console.log("异常:", e); })另一种方式是，可以创建fromData对象（此时可以传递文件） const formData = new FormData(); formData.append('itfCnName', itfCnName); formData.append('itfApp', itfApp); formData.append('itfChannel', itfChannel); formData.append('invokeMethod', invokeMethod); formData.append('itfType', itfType); formData.append('returnFormat', returnFormat); formData.append('requestMethod', requestMethod); formData.append('itfLimit', itfLimit); formData.append('itfVersion', itfVersion); formData.append('itfDesc', itfDesc); axios.post(url, formData) .then(res => { //请求成功 } }) .catch(e => { console.log("异常:", e); }) }axios实现多个并行请求 let params = { "data": { "business": {} } } axios.all([ axios.post(belongToChannelUrl, params), axios.post(belongToAppUrl, params), axios.post(protocolUrl, params), axios.post(interfaceTypeUrl, params), ]) .then(axios.spread(function (resChannel, resApp, resProtocol, resType) { options.belongToChannel = resChannel.data.data.business.options; options.belongToApp = resApp.data.data.business.options; options.protocol = resProtocol.data.data.business.options; options.interfaceType = resType.data.data.business.options; dispatch({ type: 'SAVE_OPTIONS', payload: { options:options, operCode: operCode }, }) })) .catch(e => { console.log("异常:", e); })3.fetch（不需要安装） JSON提交 JSON是常用的一种前后端数据传递格式。前端传递的是键值对的数据，即对象(Object)。采用JSON传递参数，请求头Content-Type为application/json;charset=utf-8，其中charset为采用的字符集。 注意点: 既然为JSON提交，就要对参数进行序列化，即JSON.stringify(params)，否则传递到服务端的参数可能是[Object object] 服务端(node.js)是以流的方式进行接收，接收完是一个JSON字符串，调用JSON.parse(params)可以对参数进行反序列化 // 实例化一个Request实例 // 第一个参数一般指资源路径 // 第二个参数可以理解为请求的配置项，包含头部信息和http请求一些关键配置（请求类型、参数...） let requestInstance = new Request('/hello', { method: 'post', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body:JSON.stringify({a: 1}) }) // fetch方法参数同Request实例 // 第一个参数为url或者Request实例 // 第二个参数为请求配置项 fetch(requestInstance).then(response => { // 返回的是一个Response的实例 // 调用Response实例的序列化方法，序列化成json,返回值是一个promise // 序列化方法有 json,text,formData,blob,arrayBuffer,redirct let result = response.json() result.then(res => { consolee.log(res) }) }) fetch(url,{ method: 'post', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: '{"hello": "world"}' }) .then(res => res.json()) .then(data=> { console.log('返回数据:',data) }) .catch(err => { console.log(err) }) |
请求头：
请求头：
jq: 
首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 会进行URL 转码。
首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 mutipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 表示结束。
这种方案，可以方便的提交复杂的结构化数据，特别适合 Restful 的接口。各大抓包工具如 Chrome 自带的开发者工具、Firebug、Fiddler，都会以树形结构展示 JSON 数据，非常友好。但也有些服务端语言还没有支持这种方式。
【本文地址】
今日新闻 |
推荐新闻 |