Ajax，PHPを用いた非同期通信の方法

初めての投稿ですので至らないところがありましたら申し訳ありません。

js,jQuery,PHP,jsonを用いた投票ツールを作りたいと考えています。
ですがプログラミング初心者でPHPは触れたことがなく、Ajaxについてもあやふやな状況です。
いろいろ調べてみてもGET、POSTなどいろいろあり訳が分からなくなってしまいました。

作成したいプログラム

複数人で遊びたいゲームを投票し、その結果をリアルタイムで反映させる。
ユーザは遊びたいゲームを追加することができる。
サーバ側で誰が何に投票したのか、またどのゲームが何票投票されたのかを保存し、それをHTMLに反映させる。

HTML上の”追加”ボタンを押すとサーバ内のgameNameList.json内にゲーム候補が追加されるようにしたいです。
またuserNameListに投票した人の名前、投票したゲームを保存したいと考えています。
また”送信”ボタンを押すとページ下部にリアルタイムで投票の詳細を反映させたいと考えています。

つまり、まとめるとだれがどのゲームに投票し、どのゲームが一番人気なのかを表示できるようにしたいのです。
また投票するゲーム候補の追加、投票の訂正もできたらいいと思っています。

お願いしたい内容

jsからサーバのPHPにjsonデータを送り、それをサーバ内のjsonへpushするプログラムの作成方法

ややこしく書いてしまい申し訳ありません。
超のつく初心者ですので、もしこれ以外の便利な方法があったらそれもご教授願いたいです。
どうぞよろしくお願いいたします。
稚拙ですがいままで書いたコードを載せます。

index.html
1<!--index.html-->
2<!doctype html>
3<html>
4<head>
5<meta charset="utf-8">
6<title>わたしいるよ</title>
7<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
8<script type="text/javascript" src="gameNameList.json"></script>
9<script type="text/javascript" src="userNameList.json"></script>
10<script type="text/javascript" src="main.js"></script>
11</head>
12<body>
13<form name="post">
14  <table border="0">
15    <tr>
16      <td align="right"><b> ユーザー名：</b></td>
17      <td><input type="text" name="name" size="30" maxlength="20"></td>
18    </tr>
19    <tr>
20      <td align="right"><b> パスワード：</b></td>
21      <td><input type="password" name="pass" size="6" maxlength="4"></td>
22    </tr>
23    <tr>
24      <td align="right"><b>遊びたいゲーム：</b></td>
25      <td><div id=gameList> </div>
26        
27        <!--イメージ
28　　　　<input type="checkbox" name="gameName" value="ゲームA">ゲームA
29      <input type="checkbox" name="gameName" value="ゲームB">ゲームB
30      <input type="checkbox" name="gameName" value="ゲームC">ゲームC
31      <input type="checkbox" name="gameName" value="ゲームD">ゲームD
32      <input type="checkbox" name="gameName" value="ゲームE">ゲームE--></td>
33    <tr>
34      <td align="right"><b>ゲーム候補を追加：</b></td>
35      <td><input type="text" name="" id="newGameName" value="" placeholder="ゲーム名を入力">
36	<input type="button" value="追加" id="newGame">
37		
38		</td>
39    </tr>
40      </tr>
41    
42    <tr>
43      <td></td>
44      <td><input type="submit" value="送信">
45        <input type="reset" value="リセット"></td>
46    </tr>
47    <b>自分の選択を訂正したいときには新しくゲームを選択、または何も選択せずに送信</b>
48  </table>
49</form>
50</body>
51</html>

gameNameList.json
1//gameNameList.json
2// JSON Document
3var gameName = [
4	{
5	name: "ゲームA",
6	counting: 0
7}, {
8	name: "ゲームB",
9	counting: 0
10}, {
11	name: "ゲームC",
12	counting: 0
13}, {
14	name: "ゲームD",
15	counting: 0
16}, 
17];

userNameList.json
1//userNameList.json
2// JSON Document
3var userName = [
4	{
5	name: "testuser",
6	pass: 0000,
7	choseGame: ["ゲームA", "ゲームB"]
8	}
9]

main.js
1//main.js
2// JavaScript Document
3window.addEventListener('load', init);
4
5function init() {
6	"use strict";
7	console.log(gameName[0].name);
8	var gameList = document.getElementById("gameList");
9
10	for (var i = 0, l = gameName.length; i < l; i++) {
11		gameList.insertAdjacentHTML('beforeend', '<input type="checkbox" name="gameName" value="' + gameName[i].name + '">' + gameName[i].name);
12	}
13
14	var newGame = $('#newGame');
15	newGame.on('click', function () {
16		var newGameName = $('#newGameName').val();
17		console.log(newGameName);
18		var addData = {
19			name: newGameName,
20			counting: 0
21		};
22		gameName.push(addData);
23		gameList.insertAdjacentHTML('beforeend', '<input type="checkbox" name="gameName" value="' + gameName[gameName.length - 1].name + '">' + gameName[gameName.length - 1].name);
24
25
26                //このあたりからわからない
27		$.ajax({
28                //処理を記述
29		});
30	});
31}

どうぞよろしくお願いいたします。

m.ts10806

2018/12/15 21:20

提示されたコードで起きている問題も書かれた方がご自身がどこまで把握しているかわかるので回答もしやすいです。それに合わせてタイトルも修正した方が良いですね

m.ts10806

2018/12/15 21:21

あと「初心者アイコン」ご利用ください。

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

回答2件

投票ツールを作りたいと考えています。

これはSNSの亜種です。
まずは裏サイトの認証ページにログインして、自分の日記を書いて、表サイトで公開するブログを作ってから、
複数人認証に対応させる改造を行う形でSNSにしていきましょう。

「ブログのときは記事」でしたが、SNS化する時に記事の代わりに「ゲーム一覧」や「投票」を受け付けるように改造します。

js,jQuery,PHP,jsonを用いた投票ツールを作りたいと考えています。

ですがプログラミング初心者でPHPは触れたことがなく、Ajaxについてもあやふやな状況です。
いろいろ調べてみてもGET、POSTなどいろいろあり訳が分からなくなってしまいました。

まずはPHPでブログを作ってください。
ブログがWebアプリの全ての基本なので、Webサーバはなんなのかという本質が全て身につきます。

プロ野球選手になりたいという小学生が居たとして、
何もせずにいきなりプロ野球選手として活躍できませんよね？
ブログを作るという行為は、キャッチボールや素振り、バッティングセンターで打つという練習に繋がる行為です。

書籍を買ってくる、プログラミングスクールへ通う等、手段はいろいろありますが、
直接質問内容のサービスを立ち上げる事は不可能です。
作りながらステップアップしていかなければ一生たどり着けません。

Teratailで聞いてばかりのユーザーがたまにいますけど、
一生スキルレベルが上がらず同じような質問を繰り返しているだけですね。
こういう人は所詮君の情熱インタビュー止まりなんだろうなぁと感じながら見ています。

PHPでブログが作れるようになったら。。。

JavaScript、Ajax周りに関して軽く書いておきます。

HTMLの本質はWordやPDFとほぼ同一の存在です。
とある研究所で1990年頃に生まれた報告書をやり取りする為のファイルフォーマットです。
したがってWordやPDFで表現出来そうな機能が詰まっており、何かをクリックしたら項目が開閉したり、時間に応じて最新の情報に変化するという風には作られていません。

JavaScriptはその動的な表現を実装する為に用意されたスクリプト言語です。
HTMLを後付で書き換える事で、上記HTMLだけでは果たせなかった項目の開閉や最新の情報に変化するという魔法をHTML上に付与できます。

AjaxはJavaScriptが「最新の情報」を取ってくる手法です。
裏でWebサーバにHTTPリクエスト(GET/POST)を発射して、JSONなどのデータを受け取って解析します。
このデータをもとにHTMLを書き換えることでリアルタイムでの反映を実現させます。

でもまぁ、別に最新の情報がほしいだけならF5キーで事足りるので、
まずはブログ→SNS→作りたいサービスという風に着実にステップアップしていく事をおすすめします。

投稿2018/12/16 00:39