jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

Jquery非同期通信でPHPにフォームデータを渡して処理する

2014年3月7日
この記事は掲載から1996日経過しています。
情報が古い可能性が有りますのでご了承下さい

ユーザーがフォームから送信した内容を非同期通信でPHPに渡して処理し、結果を表示するサンプルです。

サンプル

記入した名前をPHP側でくっつけ、フルネームを表示します。なお、無記入で送信すると記入していませんね?と表示されます。

Jquery

[js]
$(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(‘処理に失敗しました’);
}
});
});
});
[/js]

PHP

[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]

PHPでは送信された姓名をくっつけ、XMLファイルとしてそれを表示しています。

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP