JavaScript

2024 年 7 月 11 日 改訂
Google Chrome のキャッシュを切る

プラベート/シークレットウィンドウにする


Python CGI でファイルをアップロードする -1
testCGI.tar.gz

こちらを参照しました.


Python CGI でファイルをアップロードする -2
http://fish-evol.org/uploadingFile/

WebServer1.tar.gz

[xxx@xxx www]$ pwd
/var/www/cgi-bin
[xxx@xxx www]$ ls
cgi-bin html
[xxx@xxx www]$ ls cgi-bin/
uploadingFile.py
uploadingFileScripts
[xxx@xxx www]$ ls html/
testWork
uploadingFile


2019 年 7 月
Execute をカウントする

http://www.fish-evol.org/executeCount/index.html

executeCount_all.tar.gz


/var/www/html/executeCount/index.html

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Counter</title>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="executeCount.js" type="text/javascript"></script>
</head>

<body hash(0x100897000)>
<form id="my_form">

<tr><td><table width="300" border="0" valign="top" align="left">
<tr>
<td width="30%" align="left">Count</td>
<td width="70%" align="left" ><div id="result">Ready.</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="left" colspan="2"><button type="submit" class="btn-primary" style="WIDTH: 100%; HEIGHT: 30px; color: black; font-size: 20px; ">Execute</button></td>
</tr>
</table></td>
</tr>

</form><!-- my_form table End -->
</body>

</html>


/var/www/html/executeCount/executeCount.js

$(function() {
$('#my_form').submit('click', function(e) {
e.preventDefault();

//var consoleInfo = console.info($('#my_form').get(0).submit);
//console.log(consoleInfo)

var fd = new FormData($('#my_form').get(0));

$(document)
.ajaxStart(function(){
//$('#prog').show();
$('#result').html('<img src="executeCount.gif" alt="" />');
})

//console.log("test1")

$.ajax({
url: '/cgi-bin/executeCount.py',
type: 'post',
dataType: 'text',
data: fd,
processData: false,
contentType: false,
})
.done(function(response) {
console.log("testDone")
$('#result').html(response);
})
$(document)
.ajaxError(function(e, xhr, opts, err){
console.log("testError_timeout")
$('#result').html('Error: timeout' + err);
})
//.fail(function() {
// $('#result').html('Failed.');
//})
//$(document)
//.ajaxStop(function(){
// $('#prog').hide();
//})
});
return false;
});


/var/www/cgi-bin/executeCount.py

#!/usr/bin/python3.6

import time

f = open("../data/counters/executeCount.dat")
lines = list(f)
f.close()

count = int(lines[0])

count += 1

out = open("../data/counters/executeCount.dat", "w")
out.write(str(count))
out.close()

time.sleep(1)

print("Content-Type: text/html\n\n")
print("")
print(count)


/var/www/cgi-bin/data/counters/executeCount.dat
12

エラー対策

Permission denied などが出て、保存ができない場合。
1. selinux を疑ってみる。
こちらを参考にしました。ありがとうございました。・

/etc/selinux/config で SELINUX=disabled と設定しシステムを再起動後、getenforce コマンドがDisabled を返すことを確認する。

/var/www/cgi-bin はファイルを書込みする場所ではないのでプログラムからのみ読み書きするファイルの置き場所は別のディレクトリにする必要がある。

sudo mkdir /var/www/data
sudo chmod 755 /var/www/data
sudo chown apahce:apache /var/www/data

と apacheユーザーでのみ書き込み可能なディレクトリを作成する。
/var/www/html , /var/www/cgi-bin は 644,755に戻しておく。




リンク

JavaScript プログラミング講座

詳しいうえにわかりやすい.質,量,とも,他の追従を許さず.

ファイルをアップロードする:クライアント側 (HTML の <FORM>),と,Python や Perl CGI などのサーバー側,の説明.
XMLHttpRequestオブジェクト: 非同期的なデータ通信を実現するための API である XMLHttpRequest (XHR),その機能,JavaScript 側の送受信,CGI 側のデータ送受信,などの説明.「非同期通信」と「ダイナミック HTML」の二つの技術をあわせたものを Ajax と言う.

Ajax を使って Python と Javascript でやり取りを行う方法

JQuery と Python で Ajax

Loader Generator

待機中のアニメーションを作成.

「Javascript 本格入門 8-1 Ajaxとは」 サーバーサイドを Python CGI で

JavaScript を介した python CGI スクリプトの動作を確認できる.helloAjax.html と helloAjax.js をホームディレクトリに保存.helloAjaxpy は cgi-bin に保存し chmod 755 を行う.http://localhost/helloAjax.html によって動作確認.

30分で理解!JavaScriptでAjaxプログラミングを理解するコツ!

W3Schools

JavaScript の基本を学習.サンプルコードの下にある「Try It yourself」をクリックすると,JavaScript のエディタと実行画面に移動.左側でサンプルコードの編集が可能.Run ボタンをクリクすると,右側の実行画面に反映される.

jsdo.it

他の開発者が作成した高度なプログラムを確認できる.JavaScript の学習がすすんでから参照すべき.SNS アカウントでの登録が必要.

Atom

エディタ.

jQuery

jQery の本家サイト.Download jQuery からダウンロード.JavaScript のライブラリ.基本的な HTML ページ操作や,Ajax と呼ばれるネットワーク通信,標準 JavaScript の拡張など,JavaScript による Web サイト開発全般を広くサポート.

jQuery Plugin Registry

jQuery の機能を拡張するためのライブラリである jQuery のプラグイン集.プラグインを jQuery と一緒に利用することで,jQuery 本体にない便利な機能を利用できる.

Python と JavaScript ではじめるデータビジュアリゼーション

補足資料 (コード例や練習問題など).

Mozilla Developer Network

JavaScript の基本的なチュートリアルから,個別のオブジェクトに関するリファレンスを網羅.

JQuery逆引きリファレンス

処理対象別インデックス

HTML クイックリファレンス

マークアップ言語 HTML とスタイルシート CSS のリファレンス.

はじめて ajax を使うときに知りたかったこと

ファイルの存在を確認する方法

jQuery.ajax()

jQuery で ajax 読み込みエラー 1, 2,

jQuery, Ajax で複数選択チェックボックスを POST

jQuery 最高の教科書

サンプルファイル各サンプルのアップ

FormData Object を使った $.ajax()

jQueryでチェックボックスを操作するさまざまな方法

AJAX入門 データを送信中に処理中のメッセージを表示する

【jQuery】Ajaxのローディング時に、くるくる(スピナー)を表示

ローディングアイコンを作成してくれるWebサービスのまとめ

jQuery 入門:.ajaxStart()

Qiita: submit とローディング

ajax を使わなくてもローディング画像を出せる?

jQuery逆引きリファレンス

非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)

JavaScript で Python と通信を行う方法:ajax 経由

Python 側では CGI で受信。Javascript で Ajax が使用できるか確認し、Python と Javascript の連携テスtを行うなど、丁寧な解説がある。CGI は、レンタルサーバーでは利用できない可能性がある。