From b1e222e31a476c69a946c5b5243f439ea8dd12be Mon Sep 17 00:00:00 2001 From: lucas bamberg Date: Fri, 17 Feb 2023 22:59:43 +0100 Subject: [PATCH] add content to files - thx to vsc for no auto save :-P --- README.md | 19 ++++++++ Request.js | 125 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 144 insertions(+) diff --git a/README.md b/README.md index e69de29..aba2fff 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,19 @@ +# Request js +## Frontend Helper +Kleiner Helfer zur einfachen Kommunikation mit dem Backend was einen XCSRF Token erwartet. Durch einfachen aufruf von 'Post' oder 'Get' mit den Parametern 'url' und 'data' kann einfach ein ajax Request abgeschickt werden, der sich automatisch den XCSRF Token aus den Meta Infos des Headers nimmt. + +### Beispiel + +``` javaScript: +import {Post} from 'Request.js' + +const url = 'https://example.com'; +const data = {foo:'bar', hip: 'hop'} + +const {success, content, message} = await new Post(url, data); +if (!success) { + // do some code for bad response + return; +} +// do some things with content... +``` diff --git a/Request.js b/Request.js index e69de29..af09af3 100644 --- a/Request.js +++ b/Request.js @@ -0,0 +1,125 @@ +export const getCsrf = ( name = "X-CSRF-TOKEN") => { + const $meta = document.querySelector(`meta[name="${name}"]`); + const content = $meta.getAttribute("content"); + const obj = {}; + obj[name] = content; + return obj; +} + +const getFetchHeaders = () => { + return { + ...getCsrf(), + "X-Requested-Width": "XMLHttpRequest" + } +} + +const getFetchConfig = () => { + return { + headers: getFetchHeaders(), + mode: 'cors', + cache: 'no-cache', + credentials: 'same-origin', + redirect: 'follow', + referrerPolicy: 'no-referer' + } +} + +const transArray = (name, arr) => { + return arr.map((val) => `${name}[]=${val}`).join('&'); +} + +const transSearchParams = (data) => { + let str = ""; + for (const[key, value] of Object.entries(data)) { + if (Array.isArray(value)) { + str += `${encodeURIComponent(key)} = ${encodeURIComponent(value)}`; + } + } + return str; +} + +export class Form { + static _createInput = (name, value, type = 'text') => { + const oInput = document.createElement("input"); + oInput.setAttribute('type', type); + oInput.setAttribute('name', name); + oInput.setAttribute('value', value); + return oInput; + } + + static post(url, data) { + const oForm = document.createElement('form'); + Object.entries(data).forEach(([name, value]) => { + oForm.append(Form._createInput(name, value)); + }); + const oCsrf = getCsrf(); + const sCsrfName = Object.keys(oCsrf)[0]; + const sCsrfValue = oCsrf[sCsrfName]; + oForm.append(Form._createInput(sCsrfName,sCsrfValue)); + + oForm.style.display = 'none'; + oForm.setAttribute('method', 'post'); + oForm.setAttribute('action',url); + + document.append(oForm); + oForm.submit(); + } + + static get(url, data) { + const oForm = document.createElement('form'); + Object.entries(data).forEach(([name, value]) => { + oForm.append(Form._createInput(name, value)); + }); + const oCsrf = getCsrf(); + const sCsrfName = Object.keys(oCsrf)[0]; + const sCsrfValue = oCsrf[sCsrfName]; + oForm.append(Form._createInput(sCsrfName,sCsrfValue)); + + oForm.style.display = 'none'; + oForm.setAttribute('method', 'get'); + oForm.setAttribute('action',url); + + document.append(oForm); + oForm.submit(); + } + +} + +export const Upload = (url, data, file) => { + const formData = new FormData(); + formData.append('image', file); + Object.entries(data).forEach(([k,v]) => { formData.append(k,v) }); + + return $.ajax({ + url, + cache: false, + constentType: false, + processData: false, + method: 'POST', //method for newer jQuery versions, type for older one thx @ Marian Haller + type: 'POST', + 'headers': getCsrf(), + data: formData + }); +} + +export const Post = (url, data) => { + const headers = {...getCsrf()}, + return $.ajax({ + url, + data, + method: 'POST', //method for newer jQuery versions, type for older one thx @ Marian Haller + type: 'POST', + headers + }); +} + +export const Get = (url, data) => { + const headers = {...getCsrf()}, + return $.ajax({ + url, + data, + method: 'GET', //method for newer jQuery versions, type for older one thx @ Marian Haller + type: 'GET', + headers + }); +} \ No newline at end of file