BETA

Ajaxで受け取ったデータを比較させた時に文字も型も同じなのに不一致になった。

投稿日:2020-01-29
最終更新:2020-01-29

作成中のアプリでいいねボタンを作りたくて、Ajaxを使って実装しようとした時にかなり苦労しました。
Ajaxで受け取った文字列が"ON"なら、いいねのボタンの形を変更する。そうでないなら変更しない。というロジックにしてたのですが、受け取った文字列が"ON"なのにいいねボタンの形が変わりませんでした。

・javascriptのコード

$.ajax({  
    url: getURL,  
    type: 'GET',  
    dataType: 'text'  
})  
.done(function(data, textStatus, jqXHR){  
    if(data === 'ON'){  
        $('#star').attr('class', 'fas fa-star');  
    } else {  
        $('#star').attr('class', 'far fa-star');  
    }  
    console.log('Ajax Succeeded');  
})  
.fail(function(jqXHR, textStatus, errorThrown){  
    console.log('Ajax Failed');  
});  

console.logで変数の中身と型も調べてみたところ、下記の通り、Ajaxで受け取ったdataはstring型で内容は'ON'でした。なら一致してるじゃん!
でも比較結果はfalseでした。

変数'data'の中身:ON  

変数'data'の型:string  

文字列'ON'の型:string  

false  

意味不明すぎて、かなり悩んだのですが、まさか同じ文字だけど文字コードが違っているとか?という点を考えて、console.logに出してみました。

console.log("変数'data'の文字構成:" + escape(data));  
console.log("文字列'ON'の文字構成:" + escape('ON'));  

すると、

変数'data'の文字構成:ON%0A  
文字列'ON'の文字構成:ON  

違う!
%0Aってなんだ?と思い、調べてみたら改行コードでした。
Ajaxで接続している先のphp(Laravel利用)のコードは下記の5行だけにしていました。

@if($result === 'ON')  
ON  
@else  
OFF  
@endif  

resultがONならONを出力して、そうでないならOFFを出力する、なんですが、
@ifで挟んだ間に出力すると改行コードも一緒に入るみたいです。
ということで下記の1行だけに直しました。

{{ $result }}  

resultにはONかOFFを返すようにしていたので、上記にしました。
※結果的に、そもそもコードが冗長な点に気付けた。笑

再度、やり直してconsole.logを見てみると、

変数'data'の文字構成:ON  
文字列'ON'の文字構成:ON  

true  

ようやく一致しました。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

あろはの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう