Jquery非同期通信でPHPにフォームデータを渡して処理する
2014年03月07日
ユーザーがフォームから送信した内容を非同期通信でPHPに渡して処理し、結果を表示するサンプルです。
記入した名前をPHP側でくっつけ、フルネームを表示します。なお、無記入で送信すると記入していませんね?と表示されます。
Jquery
$(function(){ // $("#button").click(function(){ //これペケ $(document).on('click','#button',function(e){ // クリックで実行 2014-07-24 修正 var data = $("#form").serialize(); //送信されたデータ $.ajax({ type: "POST", url: "02/03.php", //PHPを呼び出す data: data, //記入されたデータを渡す success: function(xml){ $(xml).find("item").each(function(){ var name = $(this).find("fullname").text(); if(name){ $("#str").html('あなたのフルネームは : '+name); }else{ $("#str").html('記入していませんね?'); } }); }, error:function(){ $("#str").html('処理に失敗しました'); } }); }); });
PHP
<?php $name = $_POST['name1'].$_POST['name2']; header("Content-type: application/xml"); echo '<?xml version="1.0" encoding="UTF-8" ?> ' . "\n"; ?> <rss> <item> <fullname><?php echo $name; ?></fullname> </item> </rss>
PHPでは送信された姓名をくっつけ、XMLファイルとしてそれを表示しています。