サンプルプログラム
input.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 |
<html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ $("#button1").on('click', function(event){ event.preventDefault(); var param = { "text": $('#content-src').val() }; $.ajax({ type: "POST", url: "http://localhost/test.php", data: param, dataType : "json" }).done(function(data){ var $content = $('#content-dest'); $content.val(data.text); }).fail(function(XMLHttpRequest, textStatus, errorThrown){ alert(errorThrown); }); }); }); </script> </head> <body> <form> <textarea id="content-src" cols="10" rows="10"></textarea> <textarea id="content-dest" cols="10" rows="10"></textarea> <input type="button" name="button1" id="button1" value="変換" /> </form> </body> </html> |
test.php
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $text = $_POST['text'] . "サーバー側で文字列を追加しました！"; $param = array('text' => $text); echo json_encode($param); exit; ?> |
クロスサイトの対応方法
クロスサイトに対応する場合には、下記の項目を変更します。
scriptCharset: 'utf-8'
crossDomain: true
詳細については、下記の公式ページを参照して下さい。
jQuery日本語リファレンス
