ajaxでPOSTをPHPに飛ばしているのに動作しない。

勤怠管理のタイムカードのようなものをつくっています。

index.htmlからjQueryのajaxでPOSTで飛ばして、
飛ばした先のPHPで演算し、
CSVファイルを新規作成したりして動作させたいのですが、
現状のコードで、PHPが動き、新規CSVが作成できると思っていたのですが動きません。
どうしてもわからないので質問を立てさせていただきました。
ちなみに、ブラウザでrun.phpにアクセスすると、
CSVファイルが作成されるのでファイル作成のコードは間違っていないと思うのですが。
何がいけないのでしょうか。ご指南お願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8" />
5	<title>勤怠管理β</title>
6	
7	<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1">
8
9	<link rel="stylesheet" href="css/csvtable.css" type="text/css" />
10	<link rel="stylesheet" href="css/style.css" type="text/css" />
11
12	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
13	<script type="text/javascript" src="js/jquery.csvToTable.js"></script>
14	<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
15	
16</head>
17<body> 
18<div id="header">
19	<div class="bar">
20		名前
21		<select name="name" id="name">
22			<option value="0001">名前</option>
23			<option value="0002">赤松</option>
24			<option value="0003">佐藤</option>
25			<option value="0004">鈴木</option>
26		</select>
27	</div>
28	<div class="bar">
29		<button id="in" class="in-out">出勤</button>
30		<button id="out" class="in-out">退勤</button>
31	</div>
32	<div class="time-bar">
33	<p id="day-time"></p>
34	</div>
35</div>
36
37<div id="CSVTable">
38
39</div>
40
41		<script>
42		
43		var nowtime ="";
44		var nowday ="";
45		var selectname="";
46		
47			$(function(){
48			setInterval(function(){
49			selectname = $("#name").val();
50			var now = new Date();
51			var y = now.getFullYear();
52			var m = now.getMonth() + 1;
53			var d = now.getDate();
54			var w = now.getDay();
55			var wd = ['日', '月', '火', '水', '木', '金', '土'];
56			var h = now.getHours();
57			var mi = now.getMinutes();
58			var s = now.getSeconds();
59			$('#day-time').text(y + '年' + m + '月' + d + '日' + '(' + wd[w] + ')' + h + '時' + mi + '分');
60			nowtime = h + ':' + mi;
61			nowday = y + '/' + m + '/' + d;
62}, 1000);
63});
64
65function run(inorout){
66	$.ajax({
67					type:"POST",
68					url:"run.php",
69					data:{
70						inorout:nowtime,
71						"day":nowday,
72						"name":selectname
73					},
74				success : function(j_data){
75	
76		$.get('test.csv', function(data) {
77			$('#CSVSource').html('<pre>' + data + '</pre>');
78		});
79		$('#CSVTable').CSVToTable('test.csv', { loadingImage: 'images/loading.gif', startLine: 0 });
80		$.get('test.tsv', function(data) {
81			$('#TSVSource').html('<pre>' + data + '</pre>');
82		});
83		$('#TSVTable').CSVToTable('test.tsv', { loadingText: 'Loading TSV Data...', loadingImage: 'images/loading.gif', startLine: 0, separator: "\t" });
84		$('#CSVTable2').CSVToTable('test.csv', { loadingImage: 'images/loading.gif', startLine: 1, headers: ['Album Title', 'Artist Name', 'Price ($USD)'] }).bind("loadComplete",function() { 
85			$('#CSVTable2').find('TABLE').tablesorter();
86		});
87	}
88	});
89}
90
91		
92	$('#in').click(function() {
93		run("in");
94				});
95				
96	$('#out').click(function() {
97		run("out");
98				});
99	</script>
100
101		
102
103</body>
104</html>

php
1<?php
2
3$in = $_POST{'in'};
4$out = $_POST{'out'};
5$day = $_POST{'day'};
6$name = $_POST{'name'};
7$data[] = NULL;
8$nam = 0;
9$donam=0;
10
11$file = $name.date("Y").date("m").".csv";
12
13touch('data/'.$file);
14touch('data/a.csv');
15
16$f = fopen('data/'.$file, "w+");
17$f = fopen('data/a.csv', "w+");
18
19// test.csvの行を1行ずつ読み込みます。
20while($line = fgetcsv($f)){
21 $data[num] = $line;
22 $nam = $nam + 1;
23}
24
25
26
27do{
28	fputcsv($ff, $data[$donam]);
29	$donam = $donam + 1;
30}while($donam != $day);
31
32
33// test.csvを閉じます。
34fclose($f);
35fclose($ff);
36
37echo json_encode($day);
38
39?>

下記のようなコードでは問題なく動作しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8" />
5	<title>勤怠管理β</title>
6	
7	<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1">
8
9	<link rel="stylesheet" href="css/csvtable.css" type="text/css" />
10	<link rel="stylesheet" href="css/style.css" type="text/css" />
11
12	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
13	<script type="text/javascript" src="js/jquery.csvToTable.js"></script>
14	<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
15	
16</head>
17
18<body>
19
20<button id="button" class="button">ボタン</button>
21
22
23	<script>
24	
25function run(inorout){
26	$.ajax({
27					type:"POST",
28					url:"test.php",
29					data:{
30						'button':2
31					},
32				success : function(j_data){
33					alert(j_data);
34	}
35	});
36}
37	
38	$('button').click(function() {
39		run("button");
40				});
41
42	</script>
43
44</body>
45</html>
46

PHP
1<?php
2
3$button = $_POST{'button'};
4$button = $button + 1;
5touch('a.csv');
6echo json_encode($button);
7
8?>

退会済みユーザー

2018/03/21 06:34

Fiddler などのキャプチャツールで、期待通りに動く場合（ブラウザでrun.phpにアクセス）と動かない場合（jQuery ajax 利用）の要求・応答を比較するということはやってみましたか？　やってないなら、やってみて、結果を書いていただけませんか？　（それはこういうケースでのトラブルシューティングの基本のキだと思います）

退会済みユーザー

2018/03/21 06:42

あと、jQuery ajax の data パラメータの設定は間違いないですか？　POST 要求の場合、(a) 受け取る側が application/x-www-form-urlencoded 形式を期待している場合は JavaScript オブジェクト、(b) ASP.NET Web API のように JSON 文字列を期待している場合は JSON 文字列を設定するのですが、見たところそのどちらでもないように見えます。

penguin520

2018/03/21 07:01

ありがとうございます。Fiddler というものを知らなかったので、さっそく試してみましたが。NOTE: This request was retried after a Receive operation failed.と出ているのでPOSTが受け取られていないようでした。

退会済みユーザー

2018/03/21 09:18

エラーメッセージでググってみましたか？

行動規範の内容に同意します

回答2件

ベストアンサー

初心者ながら勉強のためコードを試させていただきました。

現状のコードで、PHPが動き、新規CSVが作成できると思っていたのですが動きません。

とのことですが現状のコード、index.htmlでブラウザから出勤ボタンを押すと
dataフォルダの中に「a.csv」「0001201803.csv」２つのcsvファイルが作成されました。
dataフォルダを前もって作っておかないとファイルは作成されませんでした。

あと変更したとこといえばこちらの持ち合わせのファイルに合わせ

html
1<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2<script type="text/javascript" src="js/jquery.csvToTable.js"></script>
3<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>

上記の記述を

html
1<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

へ変更しただけでコピーしたコードを使いました。

投稿2018/03/21 11:21

jinba

総合スコア310

penguin520

2018/03/22 02:18

ありがとうございます。こちらでも再現できました。これって、jQueryのプラグインが関係しているのでしょうか。しかしながら、たすかりました、ありがとうございます！

jinba

2018/03/22 06:03

解決してよかったです。 jQueryのバージョンでAjaxの書き方が変わってきているそうです http://javatechnology.net/ajax/jquery-version/ 特に理由が無ければ、jQueryの最新版を使うと良いそうですどのバージョンのjQueryを使えばよいか http://blog.mudatobunka.org/entry/2016/09/04/023121 私も初心者ながらに勉強させていただきました。ありがとうございました。

行動規範の内容に同意します