JavaScriptにはサーバーにあるphpに処理をさせて、その結果を受け取らせる事が可能です。
この機能を使えばボタンを押してPHPの処理を行ってもページの更新やページの位置などの変更をしなくても実行できるようにします。
別のPHPファイルにデータを送る
まずデータを受信し加工し返信するphpを準備します。
・test_java.php
<?php error_reporting(0); mb_language("ja"); mb_internal_encoding('UTF-8'); $url=$_POST["data"]; print $_POST["data"].strval(rand()); ?>
$_POST[“data”]でデータを受け取り、ランダムの数値を追加して返すという内容です。
これを中身としたファイルを作成しサーバーへアップロードします。
そして次にJavaScriptを持つページを用意します。
function createXmlHttpRequest() { var xmlhttp=null; if(window.ActiveXObject) { try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } else if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } return xmlhttp; }
JavaScript側では、まずサーバー側とデータを通信するための機能を持つAPIを取得します。
function sendRequest() { var moji="あいうえお"; var xmlhttp=createXmlHttpRequest(); if(xmlhttp!=null) { xmlhttp.open("POST", "../test_java.php", false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var data="data="+moji; xmlhttp.send(data); var res=xmlhttp.responseText; document.getElementById( "textareas" ).value = res; } }
次にJavaScriptで”あいうえお”という文字をPOSTで送信する関数を設定します。
受信したらdocument.getElementById( “textareas” ).value = res;にテキストエリアにPHPから取得したデータを入れます。
そして、フォームを設定します。
<form> <input type="button" name="botan" id="button01" onClick="sendRequest();" value="ボタン"> <TEXTAREA id="textareas" style="width:100%;height:160px;" wrap="off"></TEXTAREA> </form>
ボタンを押すとデータが送信され、ここのtextareaに加工されたデータが挿入されます。
サンプル
ボタンを押すとあいうえお+ランダムな数字が表示されます。
JavaScriptで実行しているので、ボタンを押しても再読込もページの位置変化も起こりませんのでカーソル位置を固定のままで連打が可能です。
まとめ
これを利用すれば何度もボタンを押す事の労力も減り、好みのランダムな文字列が生成されるまで繰り返し押せます。
ということで次回はこの機能を使いランダムな文字列を作れるフォームを作ります。
JavaScript+phpでパスワード作成に使えるランダム文字列作成ツールの作成方法
ちなみにJavaScriptはブラウザで許可しておかないと動かないので注意。