@Blog
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
2桁になると数字と文字でバグる非同期通信の穴。MYSQLめ！！
2016.03.19
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2桁になると数字と文字でバグる非同期通信の穴。MYSQLめ！！</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
<script>
$(function() {
hoge(0);
});
function hoge(cnt){
$.ajax({
type: "POST",
url: "json.php",
data:{
cnt:cnt
},
dataType: 'json',
success: function(obj){
var cnt = Number(obj.cnt);
var id_name = obj.id_name;
$("#id_no").html(cnt);
$("#id_name").html(id_name);
if(id_name!=""){
hoge(++cnt);
}else{
alert("もうねぇよ━━━(ﾟ∀ﾟ≡(ﾟ∀ﾟ≡ﾟ∀ﾟ)≡ﾟ∀ﾟ)━━━━!!")
}
}
});
}
</script>
</head>
<body>
No:<span id="id_no"></span>ID:NAME:<span id="id_name"></span>
</body>
</html>
<?php
//json.php
$cnt = $_POST["cnt"];
$link = mysql_connect('localhost', 'user', 'pass');
if (!$link) {
die('接続失敗です。'.mysql_error());
}
$db_selected = mysql_select_db('database_name_hoge', $link);
if (!$db_selected){
die('データベース選択失敗です。'.mysql_error());
}
//$result = mysql_query('SELECT * FROM where id_no =' . $cnt);
$result = mysql_query('SELECT * FROM where id_no =' . intval($cnt));
if (!$result) {
die('クエリーが失敗しました。'.mysql_error());
}
$row = mysql_fetch_assoc($result);
$obj["id_name"] = $row['id_name'];
$obj["cnt"] = $cnt;
$json = json_encode($obj);
echo $json;
上記のソースはおそらく正しく動くであろうコードです。
このコードで何がしたいのかを解説していきます。
このHTML（index.html）が呼ばれたら（表示されたら）、
再帰処理がかかりPHPが動作してデータベースのテーブルから
主キーのid_no（int型）を検索しid_name（text型）を参照し
jsonで値を返して、受け取り表示するというものです。
簡単なプログラムですが、MYSQLに問い合わせをするときに
ちゃんとint型に変換してあげないと2桁なるとバグるという
問題が発生します！！
要するに0?9の間は参照してくれるのに
10になるとアレ・・・？？
ってなり、参照してくれなくなるという
問題が発生します。
トイウコトデ・・・。
PHPやJQは案外いい加減な振る舞いをしてくれるけど
MYSQLは型の設定通り動作してくれるという
事なので注意が必要です。
ちなみに上記のコードが動作するかは未検証です(´Д｀)
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
ajax.googleapis.com, AM, body>, code.jquery.com, datepicker.regional, datepicker.setDefaults, DOCTYPE html>, FROM where id_no, function hoge, head>, jquery-1.10.2.js, jquery-ui-i18n.min.js, jquery-ui.css, json.php, meta charset, MYSQL, script src, script>, select, span id, span>, title>,
非同期通信の改良版｛jsonで非同期}
2015.07.22
つい最近、この方法を知った自分です・・・。それまではこういう方法で返せると思っていなかったというかソコまで考えていなかったです。ちなみに、このjson形式で送信すると複数のデータがやりとりできるので便利です。グーグルでjson形式で非同期受信などとググるとサンプルコードがでてきます。php結構凄いなとかおもいます。おそらく他の言語でも同じようなことが出来るのだと思います。javaとか確実に出来そうな気がします。
日々、他の人が書いたコードを見ることは勉強になります。こんな書き方があるだなとか、ほんと日々、勉強になります。自分の糧にも繋がります。いま自分がもっともコードを書くときに苦戦するのが変数やオブジェクトの名前付け・・・基本的に自分は英語があまりわからないので、すごく勉強していればよかったなと思うわけです。学生時代には一にも二にも勉強だとおもいます。遊びも大事ですけど・・、やはり勉強していると将来の幅が広がることは間違いないです。
サンプルサイトはこちら。https://zip358.com/tool/sample-0722/
<?php
$hoge = $_POST['hoge'];
$obj=array();
$obj["hoge"]="urlエンコードされた文字::".urlencode($hoge)."通常文字::".$hoge;
header("Content-Type: application/json; charset=utf-8");
echo json_encode($obj);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-非同期2</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
$("#textarea-hoge").keyup(function() {
$.ajax({
type: "POST",
url: "sample-0722.php",
dataType:'json',
data: {
"hoge" : $("#textarea-hoge").val()
},
success: function(data) {
$("#hoge2").text(data.hoge);
},
error:function(data) {
}
});
});
});
</script>
</head>
<body>
<br><br>文字をURLエンコード処理して返します。何か入力してください。<br>※非同期通信なので性格に処理してくれるわけではありません。<br><br>
<textarea id="textarea-hoge" rows="10" cols="100"></textarea>
<br>
<div id="hoge2"></div>
</body>
</html>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AM, body>, br>, code.jquery.com, data.hoge, DOCTYPE html>, function, head>, hoge2, jquery-1.11.2.min.js, jquery-migrate-1.2.1.min.js, meta charset, sample-0722.php, script src, script>, textarea id, textarea-hoge, textarea>, title>, utf-8, zip358.com,
（ #PHPサンプル ）非同期通信のPHPサンプルコードを作ってみましたのでどうぞ。
2015.03.01
非同期通信で入力した文字をURLエンコード して返す、コードを書いてみましたのでどうぞ。お使いください。ただし、この処理には欠陥があって処理に負荷がかかると上手く結果を返してくれない恐れがあります。非同期処理なので処理するプログラムにばんばんと値を投げますが、返答を待たずに次の処理を投げるので、どの処理が最初に返ってくるのかは、わからないのです。一見、うまく動いてそうですけどただ、処理に負荷がかかっていないのでうまく処理された状態になっているだけです。なので、非同期処理を使う場合は、投げる値にID（順番）を付与して処理しないといけないです。
トイウコトデ、サンプルコードを置いときますのでお使いください。(デモサイトこちら）
https://zip358.com/tool/sample-0301.zip(DL)
ソースは下記参照
HTML側（JQuery側）のソース＝処理を投げる側＝処理された結果を出力する側。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-非同期</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
$("#textarea-hoge").keyup(function() {
$.ajax({
type: "POST",
url: "sample-0301.php",
dataType:'html',
data: {
"hoge" : $("#textarea-hoge").val(),
},
success: function(data) {
$("#hoge2").text(data);
},
error:function(data) {
}
});
});
});
</script>
</head>
<body>
<br><br>文字をURLエンコード処理して返します。何か入力してください。<br>※非同期通信なので性格に処理してくれるわけではありません。<br><br>
<textarea id="textarea-hoge" rows="10" cols="100"></textarea>
<br>
<div id="hoge2"></div>
</body>
</html>
PHP側のソース＝処理する側。
<?php $hoge = $_POST['hoge']; echo "urlエンコードされた文字::".urlencode($hoge)."通常文字::".$hoge; ?>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AM, body>, br>, code.jquery.com, DOCTYPE html>, function, head>, hoge2, html lang, jquery-1.11.2.min.js, jquery-migrate-1.2.1.min.js, meta charset, sample-0301.php, script src, script>, textarea id, textarea-hoge, textarea>, title>, zip358.com, トイウコトデ,