在 GET ajax 调用中传递 HEX 颜色答案

【问题标题】：Passing HEX colors in an GET ajax call在 GET ajax 调用中传递 HEX 颜色
【发布时间】：2012-12-19 09:07:24
【问题描述】：

我正在尝试通过 GET ajax 调用将一些十六进制颜色传递给 php 脚本。 PHP 似乎不喜欢十六进制颜色，我尝试替换 # 并使用 encodeURIComponent 两者都不起作用。

这是 js（每个 currentColors 条目都是十六进制颜色）

var dataString = 'designName=test&mc1='+currentColors[1]+'&mc0='+currentColors[0]+'&sp='+currentColors[2];
var strippedString = encodeURIComponent(dataString);

【问题讨论】：

为什么不去掉颜色中的#？
为什么不直接省略#？你真的不需要它。
您遇到什么错误？为什么不发送没有# 的颜色值并将其添加回服务器端（如果需要）？
问题似乎出在使用它的 PHP 代码中。
encodeURIComponent("#FFF") => "%23FFF" 是一个有效的 quey 参数值，你的服务器端显然有问题。

标签： php javascript ajax get

【解决方案1】：

使用encodeURIComponent 编码URI组件：

var strippedString = 
    "designName=test" + 
    "&mc1=" + encodeURIComponent(currentColors[1]) +
    "&mc0=" + encodeURIComponent(currentColors[0]) +
    "&sp="  + encodeURIComponent(currentColors[2]);

例子：

var strippedString = 
    "designName=test" + 
    "&mc1=" + encodeURIComponent("#FF0000") +
    "&mc0=" + encodeURIComponent("#00FF00") +
    "&sp="  + encodeURIComponent("#0000FF");
// "designName=test&mc1=%23FF0000&mc0=%2300FF00&sp=%230000FF"

在服务器端，查询字符串将产生：

// parse_str("designName=test&mc1=%23FF0000&mc0=%2300FF00&sp=%230000FF", $my_GET);
// var_dump($my_GET);

array(4) {
  ["designName"]=>
  string(4) "test"
  ["mc1"]=>
  string(7) "#FF0000"
  ["mc0"]=>
  string(7) "#00FF00"
  ["sp"]=>
  string(7) "#0000FF"
}

【讨论】：

【解决方案2】：

你可以这样做：

var strippedString = dataString.split('#').join('');

然后，在服务器端，再次将'#' 添加到参数中。

.split('#') 在'#' 字符处将一个字符串拆分为一个数组：

var s = 'designName=test&mc1=#FF0000&mc0=#FFFFFF&sp=#FF00FF';
var a = s.split('#');
console.log(a);
//["designName=test&mc1=", "FF0000&mc0=", "FFFFFF&sp=", "FF00FF"]

.join('') 然后再次加入这个数组：

var s = a.join('');
console.log(s);
//'designName=test&mc1=FF0000&mc0=FFFFFF&sp=FF00FF'

您还可以在.join('') 中使用占位符/替换字符串：

var s = a.join('%');
console.log(s);
//'designName=test&mc1=%FF0000&mc0=%FFFFFF&sp=%FF00FF'

或者，如Salman A answered，仅在组件上使用encodeURIComponent。（这无疑比我建议的数组函数快）

【讨论】：