編集履歴

質問編集履歴

追記

2019/10/01 07:04

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -72,9 +72,9 @@
     </head>
-    <body class="body">
+    <body>
-    <input id=td></div><span id=request>送信</span>
+    <input id=td><span id=request>送信</span>
     </body>
@@ -119,3 +119,19 @@
 ```
 すみません、こちらが正しいです。
+やりたいのは以下の通りです。
+1,入力して送信ボタンをクリック
+2,手動でリロードボタンをクリック
+3,以下同じ
+2から3で画像のような表示が起きてしまいます。
+URLはります。

間違えてた。

2019/10/01 07:04

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,91 +40,41 @@
         <title>タイトル</title>
-        <!--ここでjQueryのライブラリを読み込んでます。魔法の言葉です。-->
+        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+        <script>
-        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
+          $(function() {
-        <!--今回メインのajax処理を記載したjsファイルを読み込みます。-->
+            $('#request').click(function() {
-        <script type="text/javascript" src="./ajax.js"></script>
+              var data = {request : $('#td').val()};
-        <!--記事内では触れてませんが適当にcssをあてております。-->
+              $.ajax({
-        <link rel="stylesheet" href="./common.css">
+                type: "POST",url: "tt.php",data: data,
+                success : function(data, dataType) {},
+                error : function() {alert('通信エラー');}
+              });
+              $('input#td').val('');
+              return false;
+            });
+          });
+        </script>
     </head>
     <body class="body">
-        <div class="head-area">
-            <h1 class="site-ttl">ajaxサンプルです</h1>
-        </div>
-        <div class="main-area">
-            <main>
-                <!--検索フォームを作成しています。-->
-                <div class="search">
-                    <div class="search-head"><b>検索</b></div>
+    <input id=td></div><span id=request>送信</span>
-                    <form id="searchform" method="post">
-                    <table class="search-table">
-                        <tr>
-                            <th>都道府県-選択-</th>
-                            <td><select id="request" name="pref_name">
-                                <option value="" selected></option>
-                                <option value="千葉県">千葉県</option>
-                                <option value="東京都">東京都</option>
-                            </select></td>
-                        </tr>
-                        <tr>
-                            <th></th>
-                            <td><input class="submit-btn" type="submit" value="検索" id="search_button" /></td>
-                        </tr>
-                    </table>
-                    </form>
-                </div>
-                <div id="res"></div>
-            </main>
-        </div>
-        <div class="footer-area">
-            <p>サンプルデモ@(株)ペコプラ</p>
-        </div>
     </body>
@@ -132,73 +82,13 @@
 ```
-ajax.js
-```JavaScript
-$(function() {
-  //検索ボタンがクリックされたら処理が走ります。
-  $('#search_button').click(function() {
-                //HTMLから受け取るデータです。
-                var data = {request : $('#request').val()};
-                //ここからajaxの処理です。
-                $.ajax({
-                        //POST通信
-                        type: "POST",
-                        //ここでデータの送信先URLを指定します。
-                        url: "ajax.php",
-                        data: data,
-                        //処理が成功したら
-                        success : function(data, dataType) {
-                            //HTMLファイル内の該当箇所にレスポンスデータを追加します。
-                            $('#res').html(data);
-                        },
-                        //処理がエラーであれば
-                        error : function() {
-                            alert('通信エラー');
-                        }
-                 });
-                 //submitによる画面リロードを防いでいます。
-                 return false;
-    });
-  });
-```
-ajax.php
+tt.php
 ```PHP
 <?php
-    //postデータを受け取る
-    $ken = $_POST&#91;'request'&#93;;
+    $ken = $_POST['request'];
@@ -208,41 +98,13 @@
-        //pdoインスタンス生成
+    $fp = fopen("sample.txt", "a");
-        $pdo = new PDO ('mysql:host=localhost;dbname=local', '【ユーザー名】', '【パスワード】');
+      fwrite($fp, $ken);
-        //SQL文作成
+    fclose($fp);
-        $sql = "select city from local.test where prefecture = '".$ken."'";
-        //SQL実行
-        $results = $pdo->query($sql);
-        //出力ごにょごにょ
-        echo '<table class="list_table">';
-        echo "<tr>";
+        echo $ken;
-        echo "<th>市町村</th>";
-        echo "</tr>";
-        //データベースより取得したデータを一行ずつ表示する
-        foreach ($results as $result) {
-            echo "<tr>";
-            echo "<td>".$result['city']."</td>";
-            echo "</tr>";
-        }
-        echo "</table>";
@@ -250,8 +112,10 @@
     } else {
-        echo '<p id="tekito">エラー：都道府県を選択して下さい。</p>';
     }
 ```
+すみません、こちらが正しいです。

tuiki

2019/10/01 06:06

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -23,3 +23,235 @@
 キャプチャについてですがスマホので貼り付けさせていただきます。
 ![画像](3d30cbe5533742fd71221414b1daf533.jpeg)
+index.html
+```HTML
+<!DOCTYPE html>
+<html lang="ja">
+    <head>
+        <meta charset="UTF-8">
+        <title>タイトル</title>
+        <!--ここでjQueryのライブラリを読み込んでます。魔法の言葉です。-->
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
+        <!--今回メインのajax処理を記載したjsファイルを読み込みます。-->
+        <script type="text/javascript" src="./ajax.js"></script>
+        <!--記事内では触れてませんが適当にcssをあてております。-->
+        <link rel="stylesheet" href="./common.css">
+    </head>
+    <body class="body">
+        <div class="head-area">
+            <h1 class="site-ttl">ajaxサンプルです</h1>
+        </div>
+        <div class="main-area">
+            <main>
+                <!--検索フォームを作成しています。-->
+                <div class="search">
+                    <div class="search-head"><b>検索</b></div>
+                    <form id="searchform" method="post">
+                    <table class="search-table">
+                        <tr>
+                            <th>都道府県-選択-</th>
+                            <td><select id="request" name="pref_name">
+                                <option value="" selected></option>
+                                <option value="千葉県">千葉県</option>
+                                <option value="東京都">東京都</option>
+                            </select></td>
+                        </tr>
+                        <tr>
+                            <th></th>
+                            <td><input class="submit-btn" type="submit" value="検索" id="search_button" /></td>
+                        </tr>
+                    </table>
+                    </form>
+                </div>
+                <div id="res"></div>
+            </main>
+        </div>
+        <div class="footer-area">
+            <p>サンプルデモ@(株)ペコプラ</p>
+        </div>
+    </body>
+</html>
+```
+ajax.js
+```JavaScript
+$(function() {
+  //検索ボタンがクリックされたら処理が走ります。
+  $('#search_button').click(function() {
+                //HTMLから受け取るデータです。
+                var data = {request : $('#request').val()};
+                //ここからajaxの処理です。
+                $.ajax({
+                        //POST通信
+                        type: "POST",
+                        //ここでデータの送信先URLを指定します。
+                        url: "ajax.php",
+                        data: data,
+                        //処理が成功したら
+                        success : function(data, dataType) {
+                            //HTMLファイル内の該当箇所にレスポンスデータを追加します。
+                            $('#res').html(data);
+                        },
+                        //処理がエラーであれば
+                        error : function() {
+                            alert('通信エラー');
+                        }
+                 });
+                 //submitによる画面リロードを防いでいます。
+                 return false;
+    });
+  });
+```
+ajax.php
+```PHP
+<?php
+    //postデータを受け取る
+    $ken = $_POST&#91;'request'&#93;;
+    //受け取ったデータが空でなければ
+    if (!empty($ken)) {
+        //pdoインスタンス生成
+        $pdo = new PDO ('mysql:host=localhost;dbname=local', '【ユーザー名】', '【パスワード】');
+        //SQL文作成
+        $sql = "select city from local.test where prefecture = '".$ken."'";
+        //SQL実行
+        $results = $pdo->query($sql);
+        //出力ごにょごにょ
+        echo '<table class="list_table">';
+        echo "<tr>";
+        echo "<th>市町村</th>";
+        echo "</tr>";
+        //データベースより取得したデータを一行ずつ表示する
+        foreach ($results as $result) {
+            echo "<tr>";
+            echo "<td>".$result['city']."</td>";
+            echo "</tr>";
+        }
+        echo "</table>";
+    //空だったら
+    } else {
+        echo '<p id="tekito">エラー：都道府県を選択して下さい。</p>';
+    }
+```

ついき

2019/10/01 02:56

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -13,3 +13,13 @@
 警告ですが端末によって内容が違いますが大体は再送信しますか？という表記になります。
+[こちら](https://pecopla.net/web-column/web-create-jquery)のサイトを参考にしてコピペでとりあえず実装しています。
+キャプチャについてですがスマホので貼り付けさせていただきます。
+![画像](3d30cbe5533742fd71221414b1daf533.jpeg)