I've been trying to figure out how to get an API properly set up for our site and I can't get it to work. I have read tons of articles, it's just not made clear how to send info from our site to another service. I have done post API's before but not through wix. All I am wanting to do is send information from a form that users fill out to another service. I have tried many variations of this code. What do I need to change in order for this to be successful?
Front end code:
import {sendQuote} from 'backend/test.jsw'; export function button8_click(event) { sendQuote ( $w('#input4').value, $w('#input3').value, $w('#input2').value, $w('#input1').value) .then(function() { console.log("Form information was sent"); } ); }
Back end code: import {fetch} from 'wix-fetch'; export function sendQuote(name, phone, email, state) { return fetch("https://myurl", { "method": "post", "headers": { "Content-Type": "application/x-www-form-urlencoded" }, "body": JSON.stringify({name, phone, email, state}) }).then( (httpResponse) => { if (httpResponse.ok) { return httpResponse.json(); } else { return Promise.reject("Fetch did not succeed"); } } ) .then( (json) => console.log(json.someKey) ) .catch(err => console.log(err)); }
I tried many times on my own post request, I think only using application/json only will fetch successfully.
anyone got this resolved?
Hi Alexander, We are creating class, so title can be anything, even repeating one are acceptable from server side. My main question is, what point of your previous suggestion, I didn't follow, because of which parameter are not reaching the server via REST API.
@Alexander Zaytsev
I tried your suggestion,
But server couldn't get the value of variable I am sending. Following are the snippet. For testing I will check in Server if it is reflected the changes.
/// Wix backend code is :
const formdata = new FormData(); formdata.append("title", "wixAPIClass30"); formdata.append("timezone", 28); formdata.append("start_time", "09:30AM"); formdata.append("end_time", "09:50AM"); formdata.append("date", "2021-07-17"); fetch(fullUrl, { "method": "post", "headers": { "Content-Type": "application/x-www-form-urlencoded" }, "body": formdata }) .then( (httpResponse) => { console.info(JSON.stringify(httpResponse)) if (httpResponse.ok) { httpResponse.json().then(json => {console.info(json)}) } else { console.info("Fetch did not succeed"); console.error( httpResponse.json().then(json => {console.info(json)})) } } );
This gave following error in console.error
"[{"status":"error","code":"1004","error":"Class title is missing"}]"
However, when I tried the same in Postman application, I got the successful result.
If you want to use "application/x-www-form-urlencoded" in JSW files (backends file) you should use form-data format
install form-data package with Velo npm Package Manager.
backend/backend.jsw
import FormData from 'form-data'; export function sendQuote(name, phone, email, state) { const form = new FormData(); form.append('name', name); form.append('phone', phone); form.append('email', email); form.append('state', state); return fetch('https://myurl', { method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: form, }) .then((response) => { return response.json(); }); }
If you use the frontend files then you don't need to install the package. You can use a global class FormData.