值在JSON AJAX POST之后改变(百分比符号)


Values change after JSON AJAX POST (percentage symbol)

我遇到了一个问题。我正在用AJAX构建某种幻灯片编辑器。我有一个PHP脚本,其中有许多功能,可以选择不同的GET参数。一切正常。但是当我试图发布幻灯片并保存它们时,一个名为transformorigin的值从50% 50% 0变为50500。

slide.php ? action = get& id = 1

[{"slideid":1,"position":1,"background":{"id":"3","name":"http:'/'/test.com'/uploads'/1'/img'/20140729_174513.jpg"},"delay":4000,"timeshift":0,"active":true,"transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50% 50% 0","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":-80,"offsety":0,"duration":400,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50% 50% 0","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50% 50% 0","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":-80,"offsety":0,"duration":400,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50% 50% 0","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":2,"position":2,"background":{"id":"4","name":"http:'/'/test.com'/uploads'/1'/img'/20140729_174608.jpg"},"delay":4000,"timeshift":0,"active":true,"transition2d":[2,7,9],"transition3d":[],"layers":[]}]

POST slide.php ? action = post& id = 1

[{"slideid":1,"position":1,"background":{"id":"3","name":"http:'/'/test.com'/uploads'/1'/img'/20140729_174513.jpg"},"delay":4000,"timeshift":0,"active":true,"transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50500","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":80,"offsety":0,"duration":400,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50500","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50500","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":80,"offsety":0,"duration":400,"delay":0,"fade":true,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"50500","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":2,"position":2,"background":{"id":"4","name":"http:'/'/test.com'/uploads'/1'/img'/20140729_174608.jpg"},"delay":4000,"timeshift":0,"active":true,"transition2d":[2,7,9],"transition3d":[],"layers":[]}]

我不明白为什么transformorigin在POST之后改变了。当我点击发布请求的firebug post选项卡时,它仍然是50% 50% 0。服务器端输入

会得到50500
echo file_get_contents('php://input');

开头

这是我的Javascript/jQuery:
function saveSlides(success,error) {
  $.ajax({
    url: '/slide.php?action=post&id=' + lid,
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(slides),
    contentType: "application/json; charset=UTF-8",
    success: function(data) {
      if ("undefined" == typeof(data.error)) {
        slides = data;
        if (isFunction(success))
          success(data);
      } else {
        if (isFunction(error))
          error(data);
      }
    },error: function() {
      if (isFunction(error))
        error({"error":{"id":100,"message":"Could not retrieve data."}});
    }
  });
}

即使我指定了contentType它也不会改变内容类型

提前谢谢你

更新1:

用JavaScript编码所有内容后,这是我发送给php脚本的内容:

[{"slideid":"1","position":"1","background":{"id":"3","name":"http%3A//test.com/uploads/1/img/20140729_174513.jpg"},"delay":"4000","timeshift":"0","active":"true","transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":"80","offsety":"0","duration":"1000","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":"-80","offsety":"0","duration":"400","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":"80","offsety":"0","duration":"1000","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":"-80","offsety":"0","duration":"400","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":"2","position":"2","background":{"id":"4","name":"http%3A//test.com/uploads/1/img/20140729_174608.jpg"},"delay":"4000","timeshift":"0","active":"true","transition2d":[2,7,9],"transition3d":[],"layers":[]}]

这是我从php脚本中得到的结果:

[{"slideid":1,"position":1,"background":{"id":"3","name":"http:'/'/test.com'/uploads'/1'/img'/20140729_174513.jpg"},"delay":4000,"timeshift":0,"active":false,"transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":false,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"5025205025200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":80,"offsety":0,"duration":400,"delay":0,"fade":false,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"5025205025200","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":80,"offsety":0,"duration":1000,"delay":0,"fade":false,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"5025205025200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":80,"offsety":0,"duration":400,"delay":0,"fade":false,"rotate":0,"rotatex":0,"rotatey":0,"skewx":0,"skewy":0,"scalex":1,"scaley":1,"transformorigin":"5025205025200","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":2,"position":2,"background":{"id":"4","name":"http:'/'/test.com'/uploads'/1'/img'/20140729_174608.jpg"},"delay":4000,"timeshift":0,"active":false,"transition2d":[2,7,9],"transition3d":[],"layers":[]}]

所以现在它从50%25%2050%25%200变成了5025205025200。

在我添加一个url解码到我的php脚本后,它再次返回50500。

更新2:

现在我正在尝试测试php文件。

当我这样做时:

echo file_get_contents('php://input');
die;

我收到的和我发送的是一样的

[{"slideid":"1","position":"1","background":{"id":"3","name":"http%3A//test.com/uploads/1/img/20140729_174513.jpg"},"delay":"4000","timeshift":"0","active":"true","transition2d":[2,7,9],"transition3d":[],"layers":[{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":"80","offsety":"0","duration":"1000","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":"-80","offsety":"0","duration":"400","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}}},{"background":[],"tag":"h1","content":"Test","style":{"top":"0px","left":"0px"},"transitionin":{"offsetx":"80","offsety":"0","duration":"1000","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}},"transitionout":{"offsetx":"-80","offsety":"0","duration":"400","delay":"0","fade":"true","rotate":"0","rotatex":"0","rotatey":"0","skewx":"0","skewy":"0","scalex":"1","scaley":"1","transformorigin":"50%25%2050%25%200","easing":{"id":14,"name":"easeInOutQuint"}}}]},{"slideid":"2","position":"2","background":{"id":"4","name":"http%3A//test.com/uploads/1/img/20140729_174608.jpg"},"delay":"4000","timeshift":"0","active":"true","transition2d":[2,7,9],"transition3d":[],"layers":[]}]

当我这样做的时候:

$slides = json_decode(file_get_contents('php://input'),true);
print_r($slides);
die;

我得到这个:

Array
(
[0] => Array
    (
        [slideid] => 1
        [position] => 1
        [background] => Array
            (
                [id] => 3
                [name] => http%3A//test.com/uploads/1/img/20140729_174513.jpg
            )
        [delay] => 4000
        [timeshift] => 0
        [active] => true
        [transition2d] => Array
            (
                [0] => 2
                [1] => 7
                [2] => 9
            )
        [transition3d] => Array
            (
            )
        [layers] => Array
            (
                [0] => Array
                    (
                        [background] => Array
                            (
                            )
                        [tag] => h1
                        [content] => Test
                        [style] => Array
                            (
                                [top] => 0px
                                [left] => 0px
                            )
                        [transitionin] => Array
                            (
                                [offsetx] => 80
                                [offsety] => 0
                                [duration] => 1000
                                [delay] => 0
                                [fade] => true
                                [rotate] => 0
                                [rotatex] => 0
                                [rotatey] => 0
                                [skewx] => 0
                                [skewy] => 0
                                [scalex] => 1
                                [scaley] => 1
                                [transformorigin] => 50%25%2050%25%200
                                [easing] => Array
                                    (
                                        [id] => 14
                                        [name] => easeInOutQuint
                                    )
                            )
                        [transitionout] => Array
                            (
                                [offsetx] => -80
                                [offsety] => 0
                                [duration] => 400
                                [delay] => 0
                                [fade] => true
                                [rotate] => 0
                                [rotatex] => 0
                                [rotatey] => 0
                                [skewx] => 0
                                [skewy] => 0
                                [scalex] => 1
                                [scaley] => 1
                                [transformorigin] => 50%25%2050%25%200
                                [easing] => Array
                                    (
                                        [id] => 14
                                        [name] => easeInOutQuint
                                    )
                            )
                    )
                [1] => Array
                    (
                        [background] => Array
                            (
                            )
                        [tag] => h1
                        [content] => Test
                        [style] => Array
                            (
                                [top] => 0px
                                [left] => 0px
                            )
                        [transitionin] => Array
                            (
                                [offsetx] => 80
                                [offsety] => 0
                                [duration] => 1000
                                [delay] => 0
                                [fade] => true
                                [rotate] => 0
                                [rotatex] => 0
                                [rotatey] => 0
                                [skewx] => 0
                                [skewy] => 0
                                [scalex] => 1
                                [scaley] => 1
                                [transformorigin] => 50%25%2050%25%200
                                [easing] => Array
                                    (
                                        [id] => 14
                                        [name] => easeInOutQuint
                                    )
                            )
                        [transitionout] => Array
                            (
                                [offsetx] => -80
                                [offsety] => 0
                                [duration] => 400
                                [delay] => 0
                                [fade] => true
                                [rotate] => 0
                                [rotatex] => 0
                                [rotatey] => 0
                                [skewx] => 0
                                [skewy] => 0
                                [scalex] => 1
                                [scaley] => 1
                                [transformorigin] => 50%25%2050%25%200
                                [easing] => Array
                                    (
                                        [id] => 14
                                        [name] => easeInOutQuint
                                    )
                            )
                    )
            )
    )
[1] => Array
    (
        [slideid] => 2
        [position] => 2
        [background] => Array
            (
                [id] => 4
                [name] => http%3A//test.com/uploads/1/img/20140729_174608.jpg
            )
        [delay] => 4000
        [timeshift] => 0
        [active] => true
        [transition2d] => Array
            (
                [0] => 2
                [1] => 7
                [2] => 9
            )
        [transition3d] => Array
            (
            )
        [layers] => Array
            (
            )
    )
)

所以现在我必须解码它

更新3:

我必须使用encodeURIComponent()在javascript和urldecode()在php。

非常感谢,现在它可以工作了

您的文本被解释为字符编码,因为它前面有一个%符号。参见这个stackoverflow问题。你能在它被处理之前逃离它吗?

您可以在对对象进行字符串化后对文本进行编码,然后在它到达您时对其进行解码。