###前提・実現したいこと
下記サイトのサンプルコードを期待通り動がしたい。
http://noumenon-th.net/programming/2016/03/29/php_ajax/
###発生している問題・エラーメッセージ
期待する出力↓
りんごとバナナを入力しました。
現在の出力↓
{$word1}と{$word2}を入力しました。
"; //echo json_encode(array("word1"=>$word1,"word2"=>$word2));//JSON形式で返す場合
###該当のソースコード ```php html javascript <?php $word1 = $_POST['word1']; $word2 = $_POST['word2']; echo "<p>{$word1}と{$word2}を入力しました。</p>"; //echo json_encode(array("word1"=>$word1,"word2"=>$word2));//JSON形式で返す場合 ?> <!DOCTYPE html> <html> <head> <title>PHPとの間でAjax通信をおこなう</title> <meta charset="utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#submit_bt").click(function(event){ //フォームが通常の動きをしないように event.preventDefault(); //初期化 $("#ajax_result").empty(); test(); }); }); function test(){ var word_val1=$("#word_id1").val(); var word_val2=$("#word_id2").val(); $.ajax({ type: 'POST', url: './test.php', data:{ word1:word_val1, word2:word_val2 }, dataType: 'html', }) //$.post('./test.php', {word1:word_val1,word2:word_val2}) .done(function(data, status, jqXHR){ $("#ajax_result").html(data); //$("#ajax_result").html(data.word1 +"と"+ data.word2);//PHPからJSON形式で返ってくる場合 }) .fail(function(jqXHR, status, error){ $("#ajax_result").html("エラーです"); }) .always(function(jqXHR, status){ console.log(status); }); } </script> <head> <body> <form method="post"> <input type="text" value="りんご" name="word1" id="word_id1" /> <input type="text" value="バナナ" name="word2" id="word_id2" /> <input type="submit" value="送信" id="submit_bt" /> </form> <div id="ajax_result"></div> </body> </html>
###試したこと
$.ajaxのdataTypeをtextにしてみたりしました。
回答1件
あなたの回答
tips
プレビュー