Ajax Post 提交参数键值对小技巧

正文

在开发一个接口调试工具,遇到一个问题。

需求是根据输入的内容作为参数传递。在get提交是很正常的,只需要处理下参数之间连接符合就可以了。

但是post提交中,比如

id=1
name=2
class=3

这种类型,如果你直接处理然后给一个数组提交过去会变成这样。

imgn

看看我们ajax的写法

 $.ajax({
       url: url,
       type: 'post',
       dataType: 'json',
       data: {arr}
     })
     .done(function(data) {
       $("#return").val(JSON.stringify(data));
     })

好像不怎么对的样子,查了一下加个参数traditional:true,然后变成这样

imgn

键值对多了一个arr,这不是我想要的结果。

后来在网上翻,用serialize处理表单啊什么的。但是我这个是文本框中手动输入自定义数量的参数,并不是表单里的。测试了一下果然不行。

后来看到Json转换传递,但是依旧好像缺了什么。

最后发现果然还是要自己手动处理数据转为对象然后一起丢进去。

于是捡起了多年不用的正则表达式。

直接给出最终解决代码.

var url =  $("#url").val();
var str = $("#params").val();
var arr = str.split("\n"); //处理换行
var result = new Object(); //保存结果
for (var i = arr.length - 1; i >= 0; i--) {
  var regx = /(.*)\=(.*)/ig; //正则匹配 id=2 class=3这种形式
  var data = regx.exec(arr[i]);
  result[data[1]] = data[2];//把正则匹配的结果以键值对形式保存
};
//console.log(result);


$.ajax({
  url: url,
  type: 'post',
  dataType: 'json',
  data: result, //直接传
  traditional:true
})
.done(function(data) {
  $("#return").val(JSON.stringify(data));
})

结果如图

imgn

所以说有时候偷懒找捷径还是不行的-0-

Table of Contents