teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

ajax側コード追加

2016/06/02 03:17

投稿

melon910
melon910

スコア35

title CHANGED
File without changes
body CHANGED
@@ -114,4 +114,73 @@
114
114
  ```
115
115
  あとは、任意のチェックボックスにチェックし検索ボタンが押されると上記で説明したプログラムにデータが受け渡され検索を開始します。
116
116
 
117
+ よろしくお願いします。
118
+
119
+ ■再追記(2016/06/02)
120
+ すみません、ajax側のコードを追加しておりませんでした。
121
+
122
+ ますは、初期起動のコードです。
123
+ ```ここに言語を入力
124
+ //初期起動ajax
125
+ $("エリア選択ボタン").on("click", function() {
126
+ $.ajax({
127
+ url : "hoge.php",
128
+ type : "get",
129
+ dataType : "json",
130
+ scriptCharset: 'utf-8',
131
+ data: {
132
+ Area: 1
133
+ },
134
+ success : function(data){
135
+ $("#チェックボックス表示ボックス").remove();
136
+ $("#チェックボックス表示ボックス").append(data["tmp"]);
137
+ },
138
+ error: function(XMLHttpRequest, textStatus, errorThrown){
139
+ //エラー処理
140
+ }
141
+ });
142
+ });
143
+
144
+ ```
145
+ 次にチェックボックスにチェックした際のコードです。
146
+ ```ここに言語を入力
147
+ $("エリア①").live("change", function() {
148
+ var Area1 = $('["エリア①"]:checked').map(function(){
149
+ return $(this).val()
150
+ }).get().join(',');
151
+ var Area2 = $('["エリア②"]:checked').map(function(){
152
+ return $(this).val()
153
+ }).get().join(',');
154
+ var Area3 = $('["エリア③"]:checked').map(function(){
155
+ return $(this).val()
156
+ }).get().join(',');
157
+
158
+ $.ajax({
159
+ url : "hoge.php",
160
+ type : "get",
161
+ dataType : "json",
162
+ scriptCharset: 'utf-8',
163
+ data: {
164
+ Area : 1,
165
+ Area1: Area1,
166
+ Area2: Area2,
167
+ Area3: Area3
168
+ },
169
+ success : function(data){
170
+ $("#大エリアボックス").remove();
171
+ $("#大エリアボックス").append(data["エリア①"]);
172
+ if (data["エリア②"]) {
173
+ $("都道府県ボックス").remove();
174
+ $("都道府県ボックス").append(data["エリア②"]);
175
+ }
176
+ },
177
+ error: function(XMLHttpRequest, textStatus, errorThrown){
178
+ //エラー処理
179
+ }
180
+ });
181
+ });
182
+ //都道府県、市区町村も同じようなコード
183
+ ```
184
+ この後に、検索ボタンを押すと、上記のようにエリアデータを収集し、検索プログラムへデータを渡します。
185
+
117
186
  よろしくお願いします。

1

選択側のajaxのプログラムの流れを追加

2016/06/02 03:17

投稿

melon910
melon910

スコア35

title CHANGED
File without changes
body CHANGED
@@ -47,4 +47,71 @@
47
47
 
48
48
  また、この仕様だと何か他に問題が出てくるでしょうか。
49
49
 
50
- 皆様のご意見をお聞かせください。
50
+ 皆様のご意見をお聞かせください。
51
+
52
+ ■追記(2016/06/02)
53
+ ajax側のプログラムは、項目ごとに設定したボタンを押すとそれに応じたチェックボックスが起動します。
54
+ (例えば、都道府県の項目で選択を押した際には、都道府県を選択できるようなajaxが起動)
55
+
56
+ ボタンを押した初期起動は、関東や関西など大エリアを選ぶことのできるチェックボックスを生成し返します。
57
+ ```ここに言語を入力
58
+ //ajax内(例:都道府県)
59
+ //初期起動
60
+ if ($_GET["Area"] == 1) {
61
+ //関東や関西などの大エリアチェックボックスを返す
62
+ }
63
+ ```
64
+
65
+
66
+ 次に、任意の大エリアを選択すると、それに応じた都道府県を返します。
67
+ ```ここに言語を入力
68
+ //ajax内(例:都道府県)
69
+ //初期起動
70
+ if ($_GET["Area"] == 1) {
71
+ //関東や関西などの大エリアチェックボックスを返す
72
+ } else if ($_GET["Area"] == 2) {
73
+ //大エリアに応じた都道府県のチェックボックスを返す
74
+ }
75
+ ```
76
+ 次に、都道府県を選択すると、それに応じた市区町村を生成し、返します。
77
+ ```ここに言語を入力
78
+ //ajax内(例:都道府県)
79
+ //初期起動
80
+ if ($_GET["Area"] == 1) {
81
+ //関東や関西などの大エリアチェックボックスを返す
82
+ } else if ($_GET["Area"] == 2) {
83
+ //大エリアに応じた都道府県のチェックボックスを返す
84
+ } else if ($_GET["Area"] == 3) {
85
+ //都道府県に応じた市区町村のチェックボックスを返す
86
+ }
87
+ ```
88
+ 複数あるajaxは上記のような造りになっており、一度検索し、再度検索する際に以前の情報を保存するために、取得した情報をSESSIONで保存しています。
89
+ そして、その情報があった際は初期起動の際に処理を行っています。
90
+ ```ここに言語を入力
91
+ //ajax内(例:都道府県)
92
+ //初期起動
93
+ if ($_GET["Area"] == 1) {
94
+ //再検索の際に以前の情報があった場合はそれを再構築する
95
+ if ($_SESSION["エリア①"]) {
96
+ //以前の情報を再構築
97
+ } else if ($_SESSION["エリア②"]) {
98
+ //以前の情報を再構築
99
+ } else if ($_SESSION["エリア③"]) {
100
+ //以前の情報を再構築
101
+ }
102
+ //関東や関西などの大エリアチェックボックスを返す
103
+ //検索条件を保存
104
+ $_SESSION["エリア①"] = $_GET["エリア①"];
105
+ } else if ($_GET["Area"] == 2) {
106
+ //大エリアに応じた都道府県のチェックボックスを返す
107
+ //検索条件を保存
108
+ $_SESSION["エリア②"] = $_GET["エリア②"];
109
+ } else if ($_GET["Area"] == 3) {
110
+ //都道府県に応じた市区町村のチェックボックスを返す
111
+ //検索条件を保存
112
+ $_SESSION["エリア③"] = $_GET["エリア③"];
113
+ }
114
+ ```
115
+ あとは、任意のチェックボックスにチェックし検索ボタンが押されると上記で説明したプログラムにデータが受け渡され検索を開始します。
116
+
117
+ よろしくお願いします。