프리젠터 목록 화면에서 선택한 레코드 전송
13012 단어 JSONPleasanter프리잔터파이썬자바스크립트
소개
프리젠터 목록 화면에서 선택한 레코드를 보내는 방법을 설명합니다.
(송신처의 프로그램으로 PDF장표를 작성해 돌려주는, 같은 사용을 상정하고 있습니다.)
CORS 에러로 빠졌으므로, 비망과 정보 공유를 위해 기사로 합니다.
버튼 추가
스크립트에서 목록 화면에 버튼을 추가합니다.
// ======== 初期化 ========
// 一覧表示のロード時に初期化を呼び出す
$p.events.on_grid_load = function () {
init();
}
/* =============================================================================
関数:init
機能:初期化を行う
・ボタン追加
・ボタンクリック時の処理を登録
・XMLHttpRequestと応答処理を作成
引数:なし
備考:一覧画面のロード時に呼び出される
============================================================================== */
function init(){
// ======== ボタン作成 ========
var description = '';
// 送信ボタンを追加
description += '<button id="post" class="button button-icon ui-button ui-corner-all" type="button"><span class="ui-icon ui-icon-circle-arrow-n"></span>送信</button>';
// エクスポートボタンの右にボタンを追加
var element = document.getElementById("MainCommands");
element.insertAdjacentHTML('beforeend', description);
// ======== ボタンクリック時の処理を登録 ========
// 送信ボタンクリック時の処理
document.getElementById("post").onclick = function() {
post();
}
}
내보내기 버튼 오른쪽에 제출 버튼이 추가되었습니다.
송신 프로그램
그런 다음 스크립트에 제출 프로세스를 추가합니다.
이번에는 레코드 ID와 제목을 JSON 형식으로 보냅니다.
(목록 표시에 표시되지 않는 항목은 대상 프로그램에서 API를 사용하여 검색합니다)
/* =============================================================================
関数:post
機能:レコードIDを送信する
引数:なし
============================================================================== */
function post(){
// 表の行を取得
var elements = document.getElementsByClassName("grid-row");
// チェックが入った行を抽出
var rows = Array.prototype.filter.call(elements, function(x) {
return x.getElementsByClassName("grid-check")[0].checked;
});
if (rows.length > 0) {
var request = [];
for (var i=0; i<rows.length; i++){
// レコードIDとタイトルを格納
request[i] = {
record_id: rows[i].getAttribute("data-id"),
title: rows[i].children[2].textContent,
}
}
// リクエスト送信
fetch('http://hogehoge.com/cgi-bin/post/test.py', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify(request)
}).then((response) => {
// 返ってきたJSONを表示
return response.json().then((json) => {
alert(JSON.stringify(json));
});
});
}
}
그러면 test.py
로 JSON이 전송됩니다.
대상 프로그램
대상 프로그램을 작성합니다.
이번에는 프리젠터에서 받은 JSON을 그대로 반환합니다.
test.py#! C:\Python\Python38\python.exe
# -*- coding: utf-8 -*-
import json
import sys, io
# 文字化け対策
sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding='utf-8')
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
# ヘッダ出力
header = "Content-type: text/html\n"
header += "Access-Control-Allow-Origin: http://pleasanter-server.com\n" # プリザンターのサーバを指定
header += "Access-Control-Allow-Headers: ""X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept""\n"
header += "\n"
print(header)
# プリザンターからJSONを受信
data = sys.stdin.buffer.read()
params = json.loads(data.decode())
#受信したJSONをそのまま返す
print(json.dumps(params))
제출 버튼을 클릭하면 결과가 반환되었습니다!
test.py
에서 Access-Control-Allow-Origin
와 Access-Control-Allow-Headers
를 헤더로 출력하지 않으면 CORS 오류가 발생합니다.
(여기서 빠졌습니다)
요약
일람 화면으로부터 복수행을 외부에 송신해 처리하고 싶었습니다만, 드디어 실현할 수 있었습니다.
Reference
이 문제에 관하여(프리젠터 목록 화면에서 선택한 레코드 전송), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YoshikiSawada/items/f5b2416fed9661a7727c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// ======== 初期化 ========
// 一覧表示のロード時に初期化を呼び出す
$p.events.on_grid_load = function () {
init();
}
/* =============================================================================
関数:init
機能:初期化を行う
・ボタン追加
・ボタンクリック時の処理を登録
・XMLHttpRequestと応答処理を作成
引数:なし
備考:一覧画面のロード時に呼び出される
============================================================================== */
function init(){
// ======== ボタン作成 ========
var description = '';
// 送信ボタンを追加
description += '<button id="post" class="button button-icon ui-button ui-corner-all" type="button"><span class="ui-icon ui-icon-circle-arrow-n"></span>送信</button>';
// エクスポートボタンの右にボタンを追加
var element = document.getElementById("MainCommands");
element.insertAdjacentHTML('beforeend', description);
// ======== ボタンクリック時の処理を登録 ========
// 送信ボタンクリック時の処理
document.getElementById("post").onclick = function() {
post();
}
}
/* =============================================================================
関数:post
機能:レコードIDを送信する
引数:なし
============================================================================== */
function post(){
// 表の行を取得
var elements = document.getElementsByClassName("grid-row");
// チェックが入った行を抽出
var rows = Array.prototype.filter.call(elements, function(x) {
return x.getElementsByClassName("grid-check")[0].checked;
});
if (rows.length > 0) {
var request = [];
for (var i=0; i<rows.length; i++){
// レコードIDとタイトルを格納
request[i] = {
record_id: rows[i].getAttribute("data-id"),
title: rows[i].children[2].textContent,
}
}
// リクエスト送信
fetch('http://hogehoge.com/cgi-bin/post/test.py', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify(request)
}).then((response) => {
// 返ってきたJSONを表示
return response.json().then((json) => {
alert(JSON.stringify(json));
});
});
}
}
#! C:\Python\Python38\python.exe
# -*- coding: utf-8 -*-
import json
import sys, io
# 文字化け対策
sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding='utf-8')
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
# ヘッダ出力
header = "Content-type: text/html\n"
header += "Access-Control-Allow-Origin: http://pleasanter-server.com\n" # プリザンターのサーバを指定
header += "Access-Control-Allow-Headers: ""X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept""\n"
header += "\n"
print(header)
# プリザンターからJSONを受信
data = sys.stdin.buffer.read()
params = json.loads(data.decode())
#受信したJSONをそのまま返す
print(json.dumps(params))
일람 화면으로부터 복수행을 외부에 송신해 처리하고 싶었습니다만, 드디어 실현할 수 있었습니다.
Reference
이 문제에 관하여(프리젠터 목록 화면에서 선택한 레코드 전송), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YoshikiSawada/items/f5b2416fed9661a7727c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)