Ajaxのサンプル

会社でAPIのテストしてて、Ajax実際に使ったことなかったのでサンプルコードを作った。

index.html

<!DOCCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>AjaxSample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

<h1> Ajax Sample</h1>

<form id="form1" method="post">
<p>name: <input type="text" id="name"></p>
<input type="button" id="submit" value="submit">
</form>

<hr>
<h2>結果</h2>
<div class="result"></div>

<script>
$(function(){
$('#submit').on('click',function(){
$.ajax({ url: './ajaxSample.php', type: "POST",
data:{
'name': $('#name').val()
}
})

//Success
.done( (data) => {
$('.result').html("<h2>done</h2>");
$('.result').html(data);
})

//Fail

.fail( (data) => {
$('.result').html("<h2>fail</h2>");
$('.result').html(data);
})
//always
.always( (data) => {
$('.result').html("<h2>always</h2>");
$('.result').html(data);
})
});
});
</script>
</body>
</html>


ajaxSample.php

<?php
$name=$_POST['name'];
$str = "Hello! ".$name."!";
echo $str;
?>

あとで整形しよ。

もう寝る

以上

カテゴリーajax

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です