API開発をする上で下記のツールをよく使います JSON綺麗 https://tools.m-bsys.com/development_tooles/json-beautifier.php JSONエンコードツール http://atwata.com/json-stringify/ 爆速レンタルサーバならConoHa WING サーバはプロに全部お任せ …
タグ: JSON
JSONフォーマットツール
JSONきれい https://tools.m-bsys.com/development_tooles/json-beautifier.php JSON Formatter JSON整形ツール:JSON Formatter 爆速レンタルサーバならConoHa WING サーバはプロに全部お任せ!「仕事」に専念したいあなたにおすすめです。 …
Ajax jQuery 基本フォーム処理
DEMO index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!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
1 2 3 4 5 6 7 8 9 10 11 |
<?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 ); |
爆速レンタルサーバならConoHa WING サーバはプロに全部お任せ!「仕事」に専念したいあなたにおすすめです。 ConoH …
No ‘Access-Control-Allow-Origin’ header is present on the requested resource エラー
ドメインを指定した利用許可
1 |
header('Access-Control-Allow-Origin: http://example.net'); |
爆速レンタルサーバならConoHa WING サーバはプロに全部お任せ!「仕事」に専念したいあなたにおすすめです。 ConoHa VPSで運営してま🐱 サーバの勉強がしたいあなたにおすすめ!現役エンジニアの管理人が選んだ、WordPress運用に適したVPSの終着点 …
シンプルフォームAPI
DEMO index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Simple API Form Ajax</title> <!--[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() { $("#submit").click(function() { var falseFlag = 0; if( document.getElementById('yourName').value == '' ) { falseFlag = 1; } if( document.getElementById('email').value == '' ) { falseFlag = 1; } if( document.getElementById('goiken').value == '' ) { falseFlag = 1; } if(falseFlag == 1) { window.alert("未入力の項目がありますよ!"); return false; } $.ajax({ url: 'api.php', type: 'post', dataType: 'json', data: { yourName : $('#yourName').val(), email : $('#email').val(), goiken : $('#goiken').val() }, }) .done(function(response){ // フォームデータ表示の削除 $('#yourName').val(''); $('#email').val(''); $('#goiken').val(''); // APIに返されたデータを受け取り表示する $('#result').append(response.data); $('#message').append('<strong style="color : green;">ご応募有難う御座います。<strong>'); }) .fail(function(){ $('#message').append('<strong style="color : red;">送信に失敗しました。時間を置いてもう一度お試し下さい。</strong>'); }) }); }); </script> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <lable>お名前</label> <input type="text" id="yourName" name="yourName" value=""><br/> <lable>メールアドレス</label> <input type="text" id="email" name="email" value=""><br/> <lable>ご意見</label> <textarea id="goiken" name="goiken" value=""></textarea><br/> <input type="button" id="submit" value="送信"><br/> <div id="result" value=""></div> <div id="message"></div> </body> </html> |
api.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php // API header('Content-Type: application/json'); $data = "{$_POST['yourName']}さん({$_POST['email']}) ご意見<hr/>{$_POST['goiken']}<hr/>"; echo json_encode( compact('data') ); // メール送信 mb_language("Japanese"); mb_internal_encoding("UTF-8"); $to = 'kanehiro@sys-guard.com'; $subject = 'アンケートフォーム'; $message = " お名前:{$_POST['yourName']}さん メールアドレス:{$_POST['email']} ご意見:{$_POST['goiken']} "; $headers = 'From: from@hoge.co.jp' . "\r\n"; mb_send_mail($to, $subject, $message, $headers); |
爆速レンタルサーバならConoHa WING サーバはプロに全 …