How can I create web service functionality via html and JavaScript - javascript

I want write a page that returns nothing but reads the parameters posted to it and manipulate them (via JavaScript) before similarly posting to third party's page. Anything returned from the third party will be dropped on the floor. Basically, I'm looking to create a proxy. My 'middle' page will need to run JavaScript. The end page will post to the middle page but not leave the page or report the status of the post.

You'll need to pass the values to your proxy using the GET form method and use window.location.search to get the values (this will only work with simple values, not file uploads).
var qsParm = new Array();
function qs() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0,pos);
var val = parms[i].substring(pos+1);
qsParm[key] = val;
}
}
}
javascript.about.com article on query passing
To resend you'll need to create and populate a form and them call the submit() method on the form element.

Related

Passing Parameter though html server pages using '#'

I am trying to pass a variable through an HTML page, and I got it working, but when I changed to a server, the HTML pages go from 'page1.html' to 'page1#' After this change I can no longer send parameters to my second page as they come out as 'undefined'. The passing of the variable works, it's just retrieving it.
The URL looks like this: http://localhost:1337/page1#?34
Here is the old working code on that no longer works:
// Takes parameters from HTML address and passes it through
var queryString = decodeURIComponent(window.location.search);
queryString = queryString.substring(0);
var queries = queryString.split("&");
var placeHolder = queries[0];
var Final = parseFloat(placeHolder)
I want to extract the number 34 from the URL and store it in a JS variable.
Thanks in advance for any advice
I'm not getting your point if you want some data from one page to another, so you can use localstorage for example
//index1.html
<script>
localStorage.setItem("item1", 34)
</script>
//index2.html
localStorage.getItem("item1")
var item = localStorage.getItem("item1");
</script>

How to access query parameter in URL in angular (outside of the hash, non-html 5 mode)?

I have a url:
http://localhost/myapplication?fruit=bannana
When I navigate to it in the browser... angular changes the URL to the following.
http://localhost/myapplication?fruit=bannana#/
My question is how can I access the "fruit=bannana"? I tried $location.search() and it does not seem to pick up the fruit=bannana.
My Reason for Needing to Do This:
$routeParams does not work for me is because I am using an authentication mechanism that drops the hashtag and everything after it (CAS) when the user goes to http://localhost/myapplication/#/fruit=bannana, the user is redirected to a login page, after logging in, the user is redirected back to http://localhost/myapplication/#/ (notice how none of the hashtag params were preserved).
If there is some workaround to this, it would be great. html5 mode on locationProvider does not work for me as I need this to work in IE9.
Here's a js function I use to read GET variables.:
//gets a get variable "variable"'s value from url
function getUrlVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
variable is the name of the GET var (in your case, fruit).
If you var x = getUrlVariable('fruit');, x would be 'banana'
Let me know if you need more explanation?

AJAX Send POST Variables to PHP

I am used to sending AJAX requests with jQuery. I now find myself with the task of having to send them using 'vanilla' JS. Using my limited knowledge, I managed to get everything working except for passing the data along with the request. The two variables that are supposed to be being passed along are always filled in as NULL in my database. Every example I have been able to find on here shows the jQuery way, which I have no problem doing.
Can anyone tell me what I am doing wrong? I assume it has something to do with the format of the data, but cannot for the live of me figure it out.
Here is the code for the request. The request object is built in the createXMLHttp() function.
var xmlHttp = createXMLHttp();
var data = {Referrer: document.referrer, Path: window.location.pathname};
xmlHttp.open('post', '/PagePilotSiteHits.php', true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(data);
var data = {Referrer: document.referrer, Path: window.location.pathname};
function buildQueryString(data)
{
var dataKeys = Object.keys(data);
var queryString = "";
for (var i = 0; i < dataKeys.length; ++i)
{
queryString += "&" + dataKeys[i] + "=" + encodeURICompenent(data[dataKeys[i]]);
}
return queryString.substr(1);
}
xmlHttp.send(buildQueryString(data));
This should do it. The data needs to be passed as a querystring. This functions will create a querystring from the data object you've provided and encodes the uri components as mentioned by #AlexV and #Quentin.

Send javascript var values to php page (not ajax)

I'm using this code, to get values from a dynamic created <table>
$("#finalizar-pedido").click(function(){
var id = [];
var qtde = [];
var makiRecheio = [];
var makiComplemento = [];
var makiCreme = [];
var makiFinalizacao = [];
var makiQtde = [];
var i = 0;
$("tr.row-item").each(function(i){
var Linha = $(this);
id[i] = Linha.find("td.pedido-nome input.id-item").val();
qtde[i] = Linha.find("td.pedido-qtde").text();
});
$("tr.row-temaki").each(function(i){
var Linha = $(this);
makiRecheio[i] = Linha.find("td.pedido-nome input.mak-recheio").val();
makiComplemento[i] = Linha.find("td.pedido-nome input.mak-complemento").val();
makiCreme[i] = Linha.find("td.pedido-nome input.mak-creme").val();
makiFinalizacao[i] = Linha.find("td.pedido-nome input.mak-finalizacao").val();
makiQtde[i] = Linha.find("td.pedido-qtde").text();
});
});
This is working well, i made some tests and the values are OK.
The Question is: How i can send the values to another page.php...
I don't want to show the result in this same page, i need to send the values to another page just like de standard html form does.
I tried to use the jQuery.post() method, but i dont know how to go to another page holding the values that i got from the table.
Sorry for the bad english, Thanks for your attention. :)
post method may have data. For example this code will send a post request to test.php with 2 parameters, name and time:
$.post( "test.php", { name: "John", time: "2pm" } );
Also you can send arrays:
$.post( "test.php", { "id": id , "qtde": qtde , ... } );
EDIT:
If you need to submit the post request and redirect to another page with the post request (No Ajax) you may make a dummy hidden form, put your data in it, make its method post and submit that form. Here you can find how to do it: jQuery post request (not AJAX)
I suggest you set a cookie in javascript, redirect the user to whatever page you like to show the data and then use PHP to read the cookie and process or display the data.
Read on setting javascript cookies on
quirksmode or w3schools
also read on working with cookies in PHP on php.net

Get json object by calling a URL with parameters

This seems like a simple problem but I have a coder's mental block:
The concept:
I type a URL, i.e - www.mysite.com/getStuff?name=Jerry&occupation=Engineer&Id=12345
and instead of getting back a webpage or something I want to get back a json object so that I can parse on a different page.
The catch:
I can certainly accomplish this by calling a MVC controller with those parameters and returning a json object. However, Let's say I need to create this json object inside a js file that takes those parameters' values from the URL and I get my json back as the result.
The questions
Can I pass parameters to a js file and return a json object? Or
Can I call a js file from a controller and pass it these parameters to and retrieve a json object?
Do I even need to call a controller via a URL, or can I just call a js file giving it parameters from a URL and then returning the json?
What is the proper/best way of handling this scenario, with MVC, js, jquery...anything??
Thanks a lot guys!
You have a couple of options
1) Generate the json in javascript
To do this you will need to create a simple page which includes a javascript JSON encoder (such as https://github.com/douglascrockford/JSON-js). This would be hosted at "/getStuff/index.html" and would be called by typing "www.mysite.com/getStuff/?arg=val..." For example:
<html>
<head>
<script src="json.js" type="text/javascript"></script>
<script type="text/javascript">
//this function will take the window.location.search string of ?name=val and
//create an object like {'name':'val'}
var parseUrl = function(urlParams) {
var retObj = {};
var urlParameters = null;
if (!urlParams || urlParams.length == 0) {return retObj}
if (urlParams.charAt(0) == '?') {
urlParameters = urlParams.substring(1);
}else {
urlParameters = urlParams;
}
if (urlParameters.length == 0) {return retObj}
var parameterPairs = urlParameters.split('&');
var x;
for (x in parameterPairs) {
var parameterPair = parameterPairs[x];
parameterPair = parameterPair.split('=');
retObj[parameterPair[0]] = parameterPair[1];
}
return retObj;
};
var createJson = function(){
var params = parseUrl(window.location.search);
//do work here
var retObj = {}; //suppose this is the result of the work
document.print(JSON.stringify(retObj)); //use the included JSON encoder
};
</script>
</head>
<body onload="createJson();">
</body>
</html>
2) Use an MVC framework
Every MVC framework in existance will give you access to the search params used in the page request. Some will require you to provide them in /function/arg1/arg2 style (so /getStuff/jerry/engineer/12345, in your case). Others use a more traditional /function/?argName=argVal... approach. Once you have the arguments, it is a trivial matter to write them to the page in JSON format (http://php.net/manual/en/book.json.php).
Decisions, Decisions
Personally, I would use the MVC method, as it requires the least running around to get the JSON you want. However, unless you are familiar with an MVC framework (such as cake) you will probably find the process of getting up and running to be a bit arduous - these frameworks are designed for serving page content and getting them to serve up JSON is not always clearly documented.
Use jquery to parse the URL by inserting this into a <script> tag before creating the json object. from link from LekisS
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
// Get object of URL parameters
var allVars = $.getUrlVars();
// Getting URL var by its nam
var byName = $.getUrlVar('name');
In a separate script tag create your json object. You will need to include the Json2.js plugin to convert objects to JSON. So include this script also before the JSON object creation.
Once you have the appropriate scripts and variables you can create a json object using those parameters as needed by calling them as shown at the bottom of the example using jquery. You can also look up which JSON conversion (i.e, to string or object) you want from the Json2.js script file.
Now we have everything inside a bunch of scripts but where do we get json object through URL calling?
So the answer is simple:
Create a simple html page with these scripts where the last script finally creates and returns the json. Upload to server and use URL parameters like
www.mysite.com/getStuff?para1=value&para2=value2 to get the json object.

Categories

Resources