JavaScript

JavaScript

2023 年 2 月 10 日　改訂

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>

<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> </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>
</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

エラー対策

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