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));
}
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.
How do I now write the front-end code to go along with this? I installed the form-data package. I updated the back end code and it now looks like this:
import {fetch} from ‘wix-fetch’ ;
import FormData from ‘form-data’ ;
function createBody(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 form
}
export function sendQuote(name, phone, email, state) {
return fetch( "https://mylink , {
“method” : “post” ,
“headers” : {
“Content-Type” : “application/x-www-form-urlencoded”
},
“body” : createBody(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));
}
How do I set up the front end to work with this?
@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.
Hey. I see you use a different title in postman and on wix-site.
WixSite:
"title": "wixAPIClass30"
Postmen:
"title": "APIClass4"
And you have en error:
"error":"Class title is missing"
Try to debug the app using these two titles by queue on Postmen and WixSite. It looks like an API error.
@jscholes On frontend you don’t need to install the FormData package. It’s a build-in class in browser API.
Frontend use global class:
https://developer.mozilla.org/en-US/docs/Web/API/FormData
Backend use npm package (polyfill):
https://github.com/form-data/form-data
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.
I’m planning to debug it today, and I try to understand what is changed.
anyone got this resolved?
I tried many times on my own post request, I think only using application/json only will fetch successfully.
I did succeed by using application/json, but not for application/x-www-form-urlencoded. And the json returned in Developer Console can’t view the response as if in Postman, you may use text in frontend to display it.
