jQuery Ajax Sample

PHPに値を送信して受け取る[1]

jQuery

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
  $(document).on('click','#button1',function(){
    $("#form1 p").remove(); //削除
      $.ajax({
            type: "POST",
            url: "ajax1.php",
            data: 'name1='+$("#name1").val(),
            dataType :'html' //html指定
      }).done(function(str){
        $("<p></p>").html(str).appendTo("#form1"); //HTMLで表示される
        $("<p></p>").text(str).appendTo("#form1"); //テキストで表示される
      }).fail(function(str){
        $('#form1').append('取得に失敗しました');
      });
  });
});

ajax1.php

?
1
<span style="color:blue"><!--?php echo date('H:i:s ').$_POST['name1']; ?--></span>

PHPに値を送信して受け取る[2]

jQuery

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
  $(document).on('click','#button2',function(){
    $("#form2 p").remove(); //削除
      $.ajax({
            type: "POST",
            url: "ajax2.php",
            data: 'name2='+$("#name2").val(),
            dataType :'xml' //xml指定
      }).done(function(str){
       // $("<p></p>").html(str).appendTo("#form2"); //これはエラーになる
        $("<p></p>").text(str).appendTo("#form2"); //[object XMLDocument]
        $("<p></p>").text( $(str).find("name").text() ).appendTo("#form2");
        $("<p></p>").text( $(str).find("time").text() ).appendTo("#form2");
         
      }).fail(function(str){
        $('#form2').append('取得に失敗しました');
      });
  });
});

ajax2.php

?
1
2
3
4
5
6
7
header("Content-type: application/xml");
 echo '<!--?xml version="1.0" encoding="UTF-8" ?--> ' . "\n";
 ?>
<xml>
  <name><!--?php echo $_POST['name2']; ?--></name>
  <time><!--?php echo date('H:i:s'); ?--></time>
</xml>