2016年3月5日土曜日

Javascript で JSON を送信(Ajax)とPHPサーバの受信のエンコード順番

Javascript で JSON を送信(Ajax)とPHPサーバの受信のエンコード順番

Javascript 側

1.  特殊文字をエンコード
     ["] >>%22  , [&] >> %26にエンコード

2.  encodeURIComponent で 1をエンコードする。
    ["] >> %2522 ,  [&] >> %2526

3.  JSON.stringifyで送信


PHP サーバ側

1.  json_decode

2.  urldecode



確認するためのJavascript
<script type="text/javascript">
        function x(x){

        var e={};
                //データそのまま
                //NG PHP サーバー側 $_REQUEST データの所得失敗、&リンクが切れます。
                //console.info('データそのまま');
                //e.input1 = document.getElementById('input1').value;
                //e.input2 = document.getElementById('input2').value;

                //データをURLエンコード
                //NG PHP サーバー側 json_decode 失敗, " の原因でした。
                //console.info('データをencodeURIComponent');
                //e.input1 = encodeURIComponent(document.getElementById('input1').value);
                //e.input2 = encodeURIComponent(document.getElementById('input2').value);

                //データの特殊文字を%22%26にエンコード
                //NG PHP サーバー側 json_decode 失敗, " の原因でした。
                //console.info('データの特殊文字を%22%26にエンコード');
                //e.input1 = fn_replace(document.getElementById('input1').value);
                //e.input2 = fn_replace(document.getElementById('input2').value);

                //データをURLエンコード、特殊文字を%22%26にエンコード
                console.info('データをURLエンコード、特殊文字を%22%26にエンコード');
                e.input1 = encodeURIComponent(fn_replace(document.getElementById('input1').value));
                e.input2 = encodeURIComponent(fn_replace(document.getElementById('input2').value));


        console.info('#111 origi',e);
        var j = new XMLHttpRequest();
        var url ='/youtube_db/test3.php?';
        j.onreadystatechange = function(){
                if(j.readyState == 4 && j.status == 200){
                        console.info('#222 response', j.responseText);
                }
       }

        j.open('POST',url,true);
        j.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        //データをJSON.stringifyで送信
        console.info('データをJSON.stringifyで送信');
        console.info('#123 JSON.stringify',JSON.stringify(e));
        j.send('p=' + JSON.stringify(e));

        //データをそのままで送信
        //console.info('データをそのままで送信');
        //console.log('#123 json en',JSON.stringify(e))
        //j.send('p=' + e);

        function fn_replace(q){
                var x = {'&':'%26', '"':'%22'};
                for(var i in x){
                        q= q.replace(RegExp(i,'g'),x[i]);
                }
                        return q;
         }
}



//データそのまま
//NG PHP サーバー側 $_REQUEST データの所得失敗、&リンクが切れます。


//データをURLエンコード
//NG PHP サーバー側 json_decode 失敗, " の原因でした。


//データの特殊文字を%22%26にエンコード
//NG PHP サーバー側 json_decode 失敗, " の原因でした。



//データをURLエンコード、特殊文字を%22%26にエンコード



Javascript 


PHP Server

<?php
//
$x = $_REQUEST;
echo "php server\n";
echo "var_dump()\n";
var_dump($x['p']);
echo "\n";
echo "var_dump(json_decode)\n";
var_dump(json_decode($x['p']));
$temp = json_decode($x['p']);
echo "\n";
echo 'urldecode($temp->input1)'.urldecode($temp->input1);
echo "\n";
echo 'urldecode($temp->input2)'.urldecode($temp->input2);
echo "\n";
echo "\n";



echo "次は\n";
echo "URLencodeしてからjson_decode.";
echo "「\"」先にデコードされる、するとjson_decodeは NULL になります。";
echo "\n";
$y = $_REQUEST;
echo "php server\n";
echo "urldecode\n";
$temp = urldecode($y['p']);
var_dump($temp);
var_dump(json_decode($temp));


?>


'\n' >> '%0d%0a'



      function fn_replace(q){
               var x = {'&':'%26',
                           '"':'%22',
                           '\n':'%0d%0a'
                          };
                      for(var i in x){
                           q= q.replace(RegExp(i,'g'),x[i]);
                        }
                     return q;
               }















2016年3月2日水曜日

Javascript 特殊文字のエンコード

Javascript 特殊文字のエンコード


function fn_esc(q){
      var x = {'&':'%26',
                 '"':'%22',
                 };
      for(var i in x){
           q= q.replace(RegExp(i,'g'),x[i]);
           }
         return q;
   };

console.log(fn_esc('&&&""""'));
%26%26%26%22%22%22%22

"樂凡%26祁隆 - 愛%22你一%22生"




修正
2016/04/09 8:18:35

function fn_replace(q){
        var x = {'\&'        :        '%26', 
                 '\"'        :        '%22',
                 '\''        :        '%27%27',
                 ' '        :         '%20',
                 '\n'        :        '%0d%0a'
                 };
        for(var i in x){
                q= q.replace(RegExp(i,'g'),x[i]);
        }
        return q;
}








2016年2月29日月曜日

PHPサーバーに、javascript ajax でJSON を送信する際に、 「&」「"」のエンコードのメモ

PHPサーバーに、javascript ajax でJSON を送信する際に、
 「&」「"」のエンコードのメモ

他の方法があれば、教えてください。


Javascript 側送信
1.   事前に文字列を置き換

     文字列を書き換えしない場合、送信することが
     できますが PHPサーバー側「&」 リンクが切、「"」は
     文字列エラーになります。
   
     var c = '樂凡&祁隆 - 愛"你一"生';
     JSON.stringify({send:c});     << NG
     c.replace(/&/g,"%26");
     c.replace(/"/g,"%22");

2   encodeURI() でエンコードします。
     c=encodeURI(c);

2.  JSON.stringify で送信します。
   
     JSON.stringify({send:c});





PHPサーバー側受け取る

1.  json_decode で
    JSON エンコードされた文字列を受け取り、
    それを PHP の変数に変換します。

2.  urldecode で
    URL エンコードされた文字列をデコードする。

    $temp = json_decode($p);
    $a = urldecode($temp->send);

 


















2016年2月28日日曜日

JSON.parse ダブルクォーテーションを 解析するとエラーになります。

JSON.parse ダブルクォーテーションを 解析するとエラーになります。
eval 関数以外の方法はないでしょうか?



{"a":"\u6797\u590f\u8587 Rosina Lam \ufe63 \u5f88\u60f3\u8a0e\u53ad\u4f60 I Wish I Could Hate You (TVB\u5287\u96c6\"\u55ae\u6200\u96d9\u57ce\"\u4e3b\u984c\u66f2) (OFFICIAL AUDIO)","b":"\u6a02\u51e1&\u7941\u9686 - \u611b\"\u4f60\u4e00\"\u751f"}













2016年2月26日金曜日

Notepad++ 最後の行を画面の最上に表示する方法

Notepad++  最後の行を画面の最上に表示する方法

Plugin の 「Notepad#」を追加します。


















2016年2月12日金曜日

イメージファイルのオリジナルサイズを確認する

イメージファイルのオリジナルサイズを確認する

.naturalHeight
.naturalWidth 

function item_cards_event(){
        var x = document.getElementsByClassName('item_cards');
        for(var i = 0; i<x.length; i++){
               x[i].addEventListener("mouseover",function(e){
                        this.style.boxShadow = "3px 3px 14px";
                    console.log(this.firstElementChild.nextElementSibling.firstElementChild.naturalWidth + 'x' + this.firstElementChild.nextElementSibling.firstElementChild.naturalHeight);
                },false);

                x[i].addEventListener("mouseout",function(e){
                         this.style.boxShadow = "1px 1px 1px";
                },false);
        }
}

item_cards_event();





function item_cards_event(){
        var x = document.getElementsByClassName('thumbnail_a');
        for(var i = 0; i<x.length; i++){
               x[i].addEventListener("mouseover",function(e){
                        this.style.boxShadow = "3px 3px 14px";
                        console.log(this.firstElementChild.alt);
                        console.log(this.firstElementChild.naturalWidth + 'x' + this.firstElementChild.naturalHeight);
                },false);
                         x[i].addEventListener("mouseout",function(e){
                         this.style.boxShadow = "1px 1px 1px";
                },false);
        }
}

item_cards_event();






2016年2月2日火曜日

location プロパティ

location プロパティ


location.href
"http://www.asus.com/Motherboards/Z170-PRO/?SearchKey=Z170/"

location.origin
"http://www.asus.com"

location.protocol
"http:"

location.host
"www.asus.com"

location.hostname
"www.asus.com"

location.pathname
"/Motherboards/Z170-PRO/"

location.search
"?SearchKey=Z170/"