ajaxとphpを使ったファイルの読み書き

## やりたいこと
　・サーバーにファイルを書き出し
　・その内容を読み込み（今回は集計してみる）

## 前提など
　・読み書きするファイルと表示ページは同一サーバー（クロスサイトではない）

## やりかた
書き込み：ajax + サーバーサイドのプログラムが必要
読み込み：ajaxだけでいける

今回は練習兼ねてjquery(ajax)＋phpで実装してみる

## 作ったソース（表示用php + javascript）
見た目はてきとうで、値のチェックもしていない。　数字以外が入るとNG。

```lang:test.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> 
<head> 
<title>lin test</title>
<style type="text/css">
body {
    background-color: #fff;
    color: #333;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
input {
  display: block;
  border: 1px solid blue;
  margin: 5px 0px;
}

.enterButton:active {
  border: 2px solid red;
  font-size: bold;
  color: blue;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
  $('#e1').click(function(){
    
    $('#result').html('通信中・・')
    /* 書き込み */
    $.ajax({
      /*
      url: 'hello.php',
      */
      url: 'write.php',
      type: 'GET',
      dataType: 'text',
      data: 'd1=' + $('#b1').val(),
      success: function(data){
        $('#result').empty();
        /* debug
        $('#result').html('通信できたよ！')
        */
        $('#result').html(data);
      },
      error: function(){
        $('#result').html('通信できなかった。。。')
      }
    }); /*ajax_end*/
    /**/
  }); /* e1 click */

  $('#e11').click(function(){ 
   
    $('#result').html('通信中・・')
    /* 読み込み */
    $.ajax({
      url: 'f1.csv',
      success: function(data){
        $('#b11').empty();
        var lines = data.split("\n");
        var sum = parseInt(0);
        for (var n=0; n<lines.length-1; n++) {
          sum = sum + parseInt(lines[n]);
        }

        $('#b11').val(sum);
        $('#result').html('とれたよ！')
      },
      error: function(){
        $('#result').html('通信できなかった。。。')
      }
    }); /*ajax_end*/
    /**/
  }); /* e11 click */

});
/* end */

</script>

</head>

<body>

  <div class="input_arra">
    <input type="text" name="textButton" id="b1"/>
    <!--
    <input type="text" name="textButton" id="b2"/>
    <input type="text" name="textButton" id="b3"/>
    -->
    <input type="button" name="enterButton" value="write" id="e1" onclick=""/>
    <input type="button" name="enterButton" value="read" id="e11" onclick=""/>
  </div>

  <!-- js text -->
  <div id="result"></div>

  <!-- js output -->
  <div class="output_arra">
    <input type="text" name="textButton" id="b11"/>
  </div>

</body>
</html>
```


## 作ったソース（書き込み用php）

```lang:write.php
<?php
  /* 定義 */
  $fileName='f1.csv';
  $data=$_GET['d1'];
  
  file_put_contents($fileName,$data."\n",FILE_APPEND);

  /* 必要があれば戻してあげる */
  print('書き込んだのは[' . $data . ']です。ファイルは['. $fileName .']です。');
```