ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【Javascript,PHP】AjaxでjsからPHPへデータの受け渡し

AjaxでjsからPHPへデータの受け渡し

http://qiita.com/katsunory/items/9bf9ee49ee5c08bf2b3d

html

<h1>Ajax form</h1>
<h2>input</h2>
<table>
<tr>
<th>name</th>
<td><input type="text" id="name"></td>
</tr>
<tr>
<th>pass</th>
<td><input type="text" id="pass"></td>
</tr>
</table>
<button id="btn">送信</button>
<h2>result</h2>
<div id="result"></div>

js

function ajaxBtn(){

//XMLHttpRequestオブジェクト作成
var req = new XMLHttpRequest();

//サーバー応答時の処理
req.onreadystatechange = function(){

  if((this.readyState == 4)&&
    (this.status == 200)){
    alert('成功'+'[status]'+this.status+'[responseText]'+this.readyState);
    //HTTPボディの情報を書き出し
      result.innerHTML = this.responseText ;
    }else{
    //通信状況を毎回確認
      alert('通信中'+'[status]'+this.status+'[responseText]'+this.readyState);
  }
  
};

//formの値を取得
var nameValue = Name.value;
var passValue = pass.value;
console.log(nameValue);
//JSONデータとして格納
var send_values = JSON.stringify({
  'name' : nameValue,
  'pass' : passValue
});

//POSTメソッドでデータ送信
req.open('POST','receive.php',true);
//この値は固定
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');

req.send(send_values);

}

//nodeを取得
var btn = document.getElementById('btn');
var Name = document.getElementById('name');
var Pass = document.getElementById('Pass');
var result = document.getElementById('result');

//クリックイベントを付与
btn.addEventListener('click',ajaxBtn,false);

js(その他ネットで見た書き方)

jsonデータにしたあと配列に変えてからPOSTしたらあまり意味ないのでは?と思い使いませんでした。

//JSONデータとして格納
var send_values = JSON.stringify({
  'name' : nameValue,
  'pass' : passValue
});

//jsonデータを配列に入れて送信

var params=[];
params.push("json="+send_values);
console.log(params);

php

<?php
//エラー表示設定
error_reporting(E_ALL);
ini_set('display_errors',1);

//POSTで受けとったJSONデータをオブジェクトデータに変更
$i = 0;
$arr = [];
foreach($_POST as $key => $value){
  $i++;
  $obj = json_decode($key);
}

function h($value){
  return htmlspecialchars($value,ENT_QUOTES,'UTF-8');
}
$name = h($obj->name);
$pass = h($obj->pass);
?>

<table>
<tr>
<th>name</th><td><?php echo $name ?></td>
</tr>
<tr>
<th>naem</th><td><?php echo $pass ?></td>
</tr>
</table>

その他気になったこと

https://allabout.co.jp/gm/gc/24103/

WebSocket
Webにおいて双方向通信を低コストで行うための仕組み。プロトコルの一種。
https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cad=rja&uact=8&ved=0ahUKEwi-9YmB9bXVAhVIW7wKHYp_CHgQFgg3MAM&url=http%3A%2F%2Fqiita.com%2Fchihiro%2Fitems%2F9d280704c6eff8603389&usg=AFQjCNETKmWNw7mizxajhGOzaO4JOEIw2w
comet
、Webアプリケーションを構築する際に利用される技術。サーバで発生したイベントをクライアントからの要請なしにクライアントに送信することができる。