JavascriptからSubmitして画面遷移せずにPHPを実行

やりたいこと{
「Javascript で」フォームに値を入れて、その値をPHPに読みこんでPHPを実行。
ただしPHPで実行するのは サーバー上のファイルに書き込むこと だけなので、ブラウザ上でPHPファイルへと遷移したくない。}

こういう条件でコードを書いていて(formを使わずAjaxでphpに値を渡す方法は難しいので断念)、
formを普通にsubmitしてPHPファイルへと遷移する場合は 正しくサーバー上のファイル書き込みができたのですが、
遷移しない場合のやりかたがうまくいきません。ご教示願います。

↓jsファイル(一部)。 HiscoreSave.phpというのが、ファイルに書き込むPHPファイルです
//hiscoreはあらかじめ定義・代入
var form = document.createElement( 'form' );
document.body.appendChild( form );
var input = document.createElement( 'input' );
input.setAttribute( 'type' , 'hidden' );
input.setAttribute( 'name' , 'name' );
input.setAttribute( 'value' , hiscore);
form.appendChild( input );
// form.setAttribute( 'action' , 'js/HiscoreSave.php' ); //ここをコメントしない時は遷移する
form.setAttribute( 'method' , 'post' );
form.setAttribute( 'onsubmit' ,'NoJump(); return false;');//NoJump()は下記
form.submit();//送信

function NoJump(){
var contact_form_contents = {
sender_name : $(':hidden[name="name"]').val()
};
$.ajax({
type: 'POST',
url: 'js/HiscoreSave.php', // 実行するPHPの相対パス
cache: false,
data: contact_form_contents, // PHPに渡すデータ。
success: function(html) {
//document.body.innerHTML += "<?php require 'js/HiscoreSave.php'; ?>";//有ってもなくても同じ
},
error: function() {
// エラーが返ってきた場合の処理
}
});

}//NoJump()終わり


//ちなみに、↓がHiscoreSave.php(全文)

<?php
$PhpHisc = $_POST['sender_name'];
$f=fopen('../saves/hiscore.txt',"ab+");
if (flock($f, LOCK_SH)){
ftruncate($f, 0);
fwrite($f, $PhpHisc);//書き換える
print($PhpHisc);//デバッグ用
}
else {print('ハイスコア更新書き込み失敗');}//デバッグ用
fclose($f);
?>


Ajaxって何かダウンロード等しなくてもJavascriptのコードに ただ書けば実行できるものなのでしょうか？Ajaxを使ったことがなく、そのへんが調べてもまったくわからなくて…(^_^;)

No.2 ベストアンサー 回答者： yambejp 回答日時： 2015/10/08 17:58

ちなみにライブラリとかつかわなくてもpostで送りっぱなしでよいならこんな感じ

<script>
function createXMLHttpRequest(){
if( window.XMLHttpRequest ){
return new XMLHttpRequest();
}else if( window.ActiveXObject ){
try{
return new ActiveXObject( "Msxml2.XMLHTTP" );
}catch(e){
return new ActiveXObject( "Microsoft.XMLHTTP" );
}
}
return null;
}
function sendPostData( serverURL, param){
var ajax = createXMLHttpRequest();
ajax.open( "POST", serverURL );
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//「追加」はここ
ajax.send( param );
}
function test(){
var hiscore=100;
sendPostData("HiscoreSave.php","name="+hiscore);
}
</script>
<input type="button" value="test" onclick="test()">

戻り値をつかわないとユーザーが不安になるので「追加」のところに
ajax.onreadystatechange=function(){
if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){
document.getElementById("hoge").innerHTML=ajax.responseText;
}
}
のような記述をしておくと更新されたことがわかってベター

この回答へのお礼

できました！ありがとうございます！

お礼日時：2015/10/09 15:22

No.1 回答者： yambejp 回答日時： 2015/10/08 12:25

端的にいえば現行ajaxしかない

あとはフレーム処理くらいだけど、さすがに最近ははやってませんね