PHP

Ajax jQuery 基本フォーム処理

| by 優

 

DEMO

 

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<link rel="stylesheet" href="css/styles.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
        $('#button').click(function(){
                $.get('api.php', {
                        name   : $('#name').val(),
                        email  : $('#email').val(),
                        goiken : $('#goiken').val(),
                }, function(data){
                        $('#result').html(data.message);
                });
        });

});
</script>

<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<label>お名前</label>
<input type="text" id="name" name="name" value=""><br/>
<label>Eメールアドレス</label>
<input type="text" id="email" name="email" value=""><br/>
<label>ご意見</label>
<textarea id="goiken" name="goiken" value=""></textarea><br/>

<hr/>
<button id="button">Ajax</button>

<p id="result"></p>
</body>
</html>

 

 

 

api.php

<?php

$ret = array(
                "name"      => htmlspecialchars("{$_GET['name']}", ENT_QUOTES, "utf-8"),
                "email"     => htmlspecialchars("{$_GET['email']}", ENT_QUOTES, "utf-8"),
                "goiken"    => htmlspecialchars("{$_GET['goiken']}", ENT_QUOTES, "utf-8"),
                "message"   => htmlspecialchars("お名前：{$_GET['name']}, Email:{$_GET['email']}, ご意見:{$_GET['goiken']}", ENT_QUOTES, "utf-8")
       );

header( 'Content-Type: application/json; charset=utf-8' );
echo json_encode( $ret );

 

 

関連記事 - More from my site -

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）