POST to REST API from webpage with javascript - javascript

I am trying to post a JSON data struct to a REST API service from a webpage from. On submitting the form, javascript will capture form field values, make JSON data, then POST the data to my REST API. I am not entirely sure how to do this with JavaScript. Can anyone point me in the right direction or drop some sample code.
Thanks

Try jQuery, it's got some nice helpers for this kind of stuff.
Check out the jQuery.post documentation, you probably want the postJSON method.
As for getting started with jQuery, check out their getting started page
You can get a form's data with
var data = $('#formid').serializeArray();
Then you can use that in the postJSON method:
$.post(url, data, callback, "json");

Or for even easier solution, use my jQuery plugin: https://github.com/jpillora/jquery.rest
I need to POST to a different domain than my webpage will be on. Can I do this?
If you don't care about older IE's you can use headers to allow cross domain requests: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

Related

JavaScript GET to retrieve one variable

I haven't really written any javascript but am building an iOS application that will utilize JavaScriptCore's framework to read a javascript code to get a variable. What I'm looking to do is set up a GET (I think) so that I can retrieve JSON data from a url and then pull a specific string from the JSON data. Within the GET method, I'll need to add credentials and one parameter. What is the best practice to do this?
As per Rory's statement above the server you are requesting the json data from must either be on the same domain as your Application/Js code or support the CORS headers.
If the above is true, then you can either use JQUery as suggested above, or for a more minimalist approach the W3Schools has a tutorial on basic Ajax.
https://www.w3schools.com/xml/dom_httprequest.asp

I need to make a PUT request to a JSON file in an external API. I need to update specific fields

I have a JSON on an external API, and, in the documentation of the API, it instructs to use a PUT request to update records. I have read a lot on this, but I haven't found an adequate amount of information.
I will do my best to provide you with the most info I can so you can help me, specifically.
I have the url stored in a variable: $record.
The documentation instructs to: Set the request body content as a json formatted array of record data. This is the “payload”.
It also provides an example:
{
“Name”: “Craig J. Peters”,
“Job Title”: “Director of Engineering”
}
I need to change specific fields. How can I accomplish this using cURL and PHP?
I should mention: If this is easier with JavaScript, I am open to that as well.
I strongly recommend you to check Guzzle as a starting point -
http://docs.guzzlephp.org/en/latest/request-options.html#body

How to manually submit a post request to a server?

I am looking for a way to manually submit a Post request to a server, without using the website's UI. I can see the request headers and the post parameters in Firebug when I perform the action manually (clicking the UI's "submit" button). I am hoping there is a way to reverse engineer some Javascript using these headers and parameters so that we can automate this process.
Reason: My company recently purchased some process automation software that enables us to write automation bots that access out business partner's portal site and automatically adjust our digital marketing bids. For one of our partner sites, front-end manipulation doesn't appear to work, because the Post request is submitted via AJAX.
The software does allow us to execute custom javascript within the environment, so I am trying to construct some Javascript using the headers and request parameters.
Is there a standard template into which I can plug these parameters to execute Javascript that will send the Post request to the server?
Thank you
UPDATE:
Thank you all for your help! I've made some progress but am still having difficulty implementing the solution within the software.
The following request works when I run the code in Firebug in Firefox:
$.ajax({
type: "POST",
url: "http://acp.example.com/campaigns/122828",
data: "data-string"
});
However, the software we're using might be a little out of date and I'm not sure it recognizes the AJAX syntax.
Is there a way to effectively write the same statement above, but in Javascript rather than AJAX? Then I think it would work.
You can use AJAX to post data to a server without any direct UI interaction. I will break down a simple jQuery example below:
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
});
$.ajax Is a method offered by the jQuery framework to make AJAX requests simple and cross browser compatible. As you can see I have passed in a JSON object containing various values:
type - This is the first key I have specified, in this instance you'll want this to be of the value POST as this determines the HTTP Request Method.
url - This specifies the server end point, for example: post/data/here.php would post the data to that url so that it can be picked up and handled correctly.
data - This key expects a JSON object, string or array of data to send in the POST request.
success - This key expects a function, it is called on the server's response to the request, with any relevant data passed through.
More documentation is available at: http://api.jquery.com/jquery.ajax/
If all you want to do is POST data, no JavaScript needed.
You should be able to use a browser extension for this. I have one called REST Console that is similar to what you describe. I believe REST Console is for Chrome only, but a quick Google search yielded a similar looking extension for FireFox called RESTClient.

Weatherbug REST JSON

I have a solid understanding of HTML and javascript. I have no experience with JSON. I would like to get the data from the URL http://i.wxbug.net/REST/Direct/GetUv.ashx?zip=21044&api_key=vxwdyz3evgtvuv9d5e53sckc and display it on a webpage. I have looked around for a simple tutorial that explains how to retrieve JSON data from a URL without prevail. Can someone point me in the right direction?
If your page is in different domain, you will encounter the "...not allowed by Access-Control-Allow-Origin" error when you use javascript to access it. However, you could make a proxy page in the server side, fetch the data and then output data.
And then, you could get the data, for example, if you use jQuery, it is very easy like:
$.getJSON(your_proxy_page_url,function(data) {
console.log(data);
});
You could also try to take look at this post, maybe it can help you out:
http://docs.jquery.com/Release:jQuery_1.2/Ajax#Cross-Domain_getScript

Internet explorer intercepts XML response

I have a form whose target is an iframe.
When submitting the form, the response is XML and I have Javascript that analyzes the response.
I noticed that when running on IE, IE intercepts the response and treats it as an RSS feed, so my code never receives the response. If I disable the RSS feeds (from the internet option, content tab) everything works ok.
I set the content type of the response to “text/xml; charset=UTF-8” but still it does not work.
Is there any workaround?
The best workaround would be not to use an iframe in this case. It sounds like IE is catching the http response and reading it on its own. Is there a reason you're not making an AJAX call to retrieve the information? It sounds like you're relying on JavaScript to handle the response anyway, so I would think that using an XMLHttpRequest object would be better for you: http://www.w3.org/TR/XMLHttpRequest/
If that's too complicated, look into a library like jQuery: http://jquery.com/ that has built in (and much simpler) functions to make AJAX calls and handle responses.
To expand on this, you would bind the submit function of the form to a JS function (or use jQuery to do it) and pick up the form data, send it in an AJAX request, and handle the response. jQuery has a built in function serialize() which is meant to convert form data on a page into information ready for use in the ajax() function to send to the server. If you're unfamiliar with the XMLHttpRequest object, I would highly suggest using a library like jQuery for this task.
OK, found the problem…
My response XML contains FEEDBACK tags.
IE treat these tags as RSS feeds. Changing the tag name to FDBACK resolve this issue…
MS, why this is not documented???
Yes, also make sure the file is output with the correct Content-Disposition using headers, do that IE gets "response.xml" and not "response.php" or some such...
'Content-Disposition: attachment; filename="response.xml"'

Categories

Resources