Q&A
さくらからCGI設置に関する詳細が公開されていますが、そちらは確認しましたか？
https://help.sakura.ad.jp/206206041/
前提・実現したいこと
＜目的＞
htmlファイルからjavascriptを呼び出し、javascriptからajaxでCGI(言語はperl)を実行させ、CGI出力値をhtmlに反映させたい。
＜方法＞
①htmlからjavascriptを呼び出す。
②javascriptでjQueryのライブラリを使用してajax通信を行う。
③ajaxの通信先URLにはCGIファイルを指定する。
④CGIファイルはハードコーディングされた適当なJSON形式の文字列を出力するようにする。
⑤javascriptはCGIによって出力された値をhtmlファイルに反映させる。
＜結果＞
ajax通信がfailしてしまった。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="Shift_JIS"> 5 <title>同期通信テスト</title> 6 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 7 <script src="script1.js"></script> 8</head> 9<body> 10 <h1>同期通信テスト</h1> 11 <form> 12 <!--ボタンがクリックされたらjavascriptを実行--> 13 <input type="button" value="データ読み込み" onClick="script1()"> 14 </form> 15 <!--ＣＧＩ出力を以下に反映させたい--> 16 <h2>ID:<span id="id"></span></h2> 17 <h2>川の名前：<span id="name"></span></h2> 18 <h2>水位：<span id="suii"></span></h2> 19 20</body> 21</html>
javascript
1function script1(){ 2 $.ajax({ 3 url: 'perl1.cgi', 4 type: 'GET', 5 dataType: 'json' 6 }).done(function(data){ 7 /* 通信成功時 */ 8 alert('通信成功！'); 9 target = document.getElementById("id"); 10 target.innerHTML =data.id; 11 target = document.getElementById("name"); 12 target.innerHTML =data.name; 13 target = document.getElementById("suii"); 14 target.innerHTML =data.suii; 15 }).fail(function(data){ 16 /* 通信失敗時 */ 17 alert('通信失敗！'); 18 }); 19}
perl
1#!/usr/bin/perl 2use JSON::JSON; 3use utf8; 4use CGI; 5 6print "Content-type:application/json; charset=utf-8\n\n"; 7print "{ id : 2001, name : shinano-river, suii : 3.02 }"
試したこと
ajaxの通信先URLをjson形式のファイルにした場合は問題なく
jsonの値をhtmlに反映させることができました。
補足情報（FW/ツールのバージョンなど）
関係あるかわかりませんがさくらサーバーを使用しています。
３つソースファイルは同じディレクトリにあります。
回答3件
0
perl
1print "Content-type:application/json; charset=utf-8\n\n"; 2print "{ id : 2001, name : shinano-river, suii : 3.02 }";
上記のコードを以下に変えたらうまく動作しました。
perl
1print "Content-type: text/html\n\n"; 2print "{ \"id\" : 2001, \"name\" : \"shinano-river\", \"suii\" : 3.02 }";
アドバイスありがとうございました。
投稿2020/09/08 10:55
総合スコア1
解決できて何よりです。
が、text/html の箇所は text/json も試してみてください（より正確な Content-Type の応答になります）。
0
ベストアンサー
④CGIファイルはハードコーディングされた適当なJSON形式の文字列を出力するようにする。
diff
1- print "{ id : 2001, name : shinano-river, suii : 3.02 }" 2+ print "{ \"id\" : 2001, \"name\" : \"shinano-river\", \"suii\" : 3.02 }"
perl で応答するJSONのフォーマットを修正してください。
use JSON::JSON;
perl 側で動的な応答をすることが目的と思いますが、CPAN検索 において JSON::JSON を見つけることができませんでした。
Perlもソースコード内に文書を埋め込むPOD という仕組みがありますので、
使おうとするモジュールのファイルにアクセスできるなら、SYNOPSIS に記載される構文は確認してください。
追記）
ajaxで GET要求する場合、ブラウザのアドレスバーに入力すると結果が応答されるはずです。
500 系のエラーなら、perlのコードに問題があります。
上述の通りですが、ご質問のコードの use JSON::JSONN を コメントアウトしたスクリプトも試してください
（これで応答があれば JSON::JSONモジュールは使用できないと言えます）。
perl
1# use JSON::JSON
perl 時代にweb公開してくれている備忘録を確認する検索キーワード例：
- google検索 sakura perl モジュール
投稿2020/09/07 11:16
編集2020/09/08 08:54総合スコア5432
あなたの回答
tips
プレビュー
