「JavaScript」カテゴリーアーカイブ

$.ajaxでオブジェクトを送信した時のエラー


$.ajax()でJavaScriptのオブジェクトをPHP側に渡そうとしたら以下のエラーが発生しました。

too much recursion

オブジェクト型ではなくstring型ならいけるかと思いJSON.stringify()して送信してみましたが今度は

TypeError: cyclic object value

というエラーが発生。

エラーについて調べて見たところ、無限ループしてしまっていたようです。

その原因は循環オブジェクト参照構造体をそのまま処理していたからでした。

参考リンク

JSON.stringify()の第2引数には関数または配列を渡すことができ、これにより挙動をコントロールできるので変換するといいようです。

■関数を渡す

const obj = { id: 1, name: "js-primer", bio: null };
const replacer = (key, value) => {
    if (value === null) {
        return undefined;
    }
    return value;
};
console.log(JSON.stringify(obj, replacer)); // => '{"id":1,"name":"js-primer"}'

■配列を渡す

const obj = { id: 1, name: "js-primer", bio: null };
const replacer = ["id", "name"];
console.log(JSON.stringify(obj, replacer)); // => '{"id":1,"name":"js-primer"}'

id,nameプロパティだけがホワイトリストとして使われ、 その配列に含まれる名前のプロパティだけが変換されます。

参考リンク

新しくオブジェクトを作って元のオブジェクトをループで回してコピーし直してもいけるかもしれません。また参照構造体にならないように一旦配列とかにデータを入れ直して。試してないのでわかりませんが。

 

 

[Html] formで画面遷移しないようにする


<form>内に<button>を配置しonClick=””で関数を実行するとsubmitしたわけでもないのに送信してしまうというか画面遷移を伴うというかリロードするというか、ボタンクリックしてalert()を表示させたいだけなのに一々上述のようになっていましたが、<button>ではなく<input type=”button”>にしたら期待通りの動きになりました。

[jQuery] serializeした文字列をデコード


serialize()を使うとフォームの値を一気に取得できたりして便利なのですがエンコードされてしまうのでフォームの値をDBに保存する時などにデコードする必要に迫られました。

そこで使ってみたのがdecodeURIComponentという関数。

ただ、+(プラス)は自力で変換しないといけないようです。

PHP側でjson_decode()したほうがいいかな。

[ jQuery ] GETパラメータ文字列を作成する ( serialize 関数 ) – 行け!偏差値40プログラマー