入力したテキストの内容をajaxで送信し、別ページで表示したい

index.htmlでテキストに入力した値をajaxでindex2.phpに送信し、内容を表示したいのですが、どのように記述したらいいか分かりません。
特にindex2.phpの表示する記述をどうすればいいのか分かりません。
ご教授願います。

【index.html】

<!DOCTYPE html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $.post('index2.php',$("#id1").serialize()); $(this).closest('form'),attr('action'); </script> </head> <html> <form action="index2.php" method="POST" id="id1"> <table> <input type="text" > <input type="submit" value="送信する"> </table> </form> </html>

【index2.php】

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

回答2件

ベストアンサー

そもそもajaxは非同期なので画面遷移する必要はないのではないですか？
POST送信し、受け取ったデータを表示すれば思っていた処理になるのではないでしょうか？

index.html
1<!DOCTYPE html> 
2<head> 
3    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
4    <script> 
5        $(function(){
6           $('#button').on('click',function(){
7                $.post("./index2.php",
8                  { text :$('#text').val() },
9                  function(data){
10                    document.write(data)
11                  }
12                );
13            }); 
14        })
15    </script> 
16</head>
17<html> 
18    <div>
19        <input type="text" id="text"> 
20        <input type="button" id="button" value="送信する"> 
21    </div> 
22</html>

index02.php
1<?php 
2echo $_POST['text'];

投稿2015/09/14 10:05

MineoOkuda

総合スコア89

mo3

2015/09/15 00:17

ありがとうございます！実装できました。書いていただいたコードを見てやはりjavascript関係の事をあまり自分が分かっていないと感じたのでよく見て勉強させていただきます。ありがとうございました。

MineoOkuda

2015/09/15 00:54

$.postは$.ajaxの簡略版なので$.ajaxを見るとどういう動作なのか、コールバックの書き方など体系的に学べると思いますよ(^^) http://js.studio-kingdom.com/jquery/ajax/ajax 参考になれば幸いです。

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

簡素に下記のindex.html、index2.phpではどうでしょうか。

HTML
1<!-- index.html -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
6  </head>
7  <body>
8    <form action="index2.php" method="POST" id="id1">
9      <table>
10        <input name="test_text" type="text" />
11        <input type="submit" value="送信する" />
12      </table>
13    </form>
14  </body>
15</html>

PHP
1# index2.php
2<!DOCTYPE html>
3<html>
4  <body>
5    input data ... <?php echo $_POST['test_text']; ?>
6  </body>
7</html>

投稿2015/09/14 07:46

CharmSystems

総合スコア241

mo3

2015/09/14 08:07

回答ありがとうございます。申し訳ないのですが今回$.postで処理をする必要があり理解の為の練習でこのような処理になっています…やはりややこしい処理なのでしょうか…

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

入力したテキストの内容をajaxで送信し、別ページで表示したい

関連した質問