I have created a html page which has a div displaying image.I have to pass the base 64 image string into this html page in the url so that I can set the image div source on loading.
The html page can be called from any application may be java/javascript or any.But along with the url the image string has to be passed to the page. Here is the sample html application which calls my html page-
<!DOCTYPE html>
<html>
<body>
<script>
imagestring ="R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7";
</script>
<button type="button" onclick="window.open('URL?image='+imagestring)">open the html page </button>
</body>
</html>
Here URL points to the html page deployed on a server.This works fine only if the imagestring value is small.
But if the size is huge because of the limitation on several browsers it won't work.What alternate way I can approach?
My requirement is huge datastring passing in url.
You need to POST the image data.
<!DOCTYPE html>
<html>
<body>
<form action="URL" method="POST">
<input type="hidden" name="image" value="R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"/>
<button type="submit">open the html page</button>
</form>
</body>
</html>
Standard URLs which use GET method by default have a limit of about 8KB in length.
If you want to send large data to the server, you must use POST method. In this case, URL remains short, and actual data will be sent to server as parameters in your submit form.
You can also POST data using ajax, like this.
You are using GET method to passing your data. you can't pass huge data by GET method. check this out: HTTP URI GET limit
Use POST method.
Related
I have a jsp page which takes a parameter from my Java code and calls the URL onLoad as below.
When I do this the form strips the resultant Url's parameters. As in everything after ? is stripped. So the below result url http://hostname/abc?data=123 appears as http://hostname/abc which is not expected.
What am I missing or is it completely wrong to use form for GET requests. Is there a better way to do this using javascript like window.location=result;
My jsp page is:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body onload="javascript:document.Form.submit()">
<%
String result = (String)request.getAttribute("result");
%>
<form action= <%= result %> method="get" name="Form">
</form>
</body>
</html>
Normaly when a form is submitted the url is constructed by the form and all form controls are passed as query parameters (that happens only when the form has the submit method of GET).
You trying to construct the url with query parameters that the form is supposed to construct is wrong. Hence you get the error.
Share with us what you try to achieve so we can understand a bit better how to help you.
<body onload="javascript:document.Form.submit()">
What I understand from that is that you try when the page is first loaded to call another url. That could happen on servlet level so there you can do with java whatever you want.
Using pure javascript as described here
get request from js you could achieve what you try to do with the form action.
However keep in mind that this would not be considered best practice when you deal with JSP
Right. I am trying to redirect to another URL with the right
parameter. I have now updated form to have a hidden input parameter
named as data as below: My final intended URL is
http://hostname/abc?data=a1%2Bz%3D%3D However the value in the form
keeps appending the numeric 25 after each % so the value in data is
a1%252Bz%253D%253D. Is some wierd URL encoding taking place here.
Right the browser will try to encode each url before trying to access it. Check here browser encoding .As you can see % will be encoded to %25. On the other end when some system parses that url it will first decode it so the %25 will again become 25. That's pretty normal
I have tried to call some API, and the API gives a html response whose content is an auto submit form by onload. so the question is How to submit the form obtained from the response API?
jquery function :
$.get( "example.html", function( data ) {
//response is html
});
response from APi (example.html) :
<!DOCTYPE html>
<html>
<head></head>
<body onload="submitOnLoad.submit();">
<form id="submitOnLoad" method="POST" action="example.com/save">
<input type="hidden" name="name" value="john" />
<input type="hidden" name="birthday" value="23-03-2003" />
</form>
</body>
</html>
Edit :
I'm sorry I was not clear. I need other solution.
First, jQuery is just a library of functions to make coding easier, especially the short hand for browser api's.
Second, you wouldn't want to get an html page via ajax, because the browsers can anyways handle the request over a webserver.
Ajax is mostly used with Restful Server end points for Data exchange, rather than getting entire HTML files.
However, if you are only playing around to learn, try this snippet. be sure to pass the html string.
$.get( "example.html", function( data ) {
$('body').html(<response html string>)
});
I am trying to select option and redirect page with form action post method to get some information and get back to previous page with those input value after submit by javascript. Could anyone tell me how to do that?
this is my code in js:
var elements = document.getElementsByName("shipping_id")[0];
elements.onchange = function(){
if(this.selectedIndex == 1){
var newWin = open('/test/static/src/html/test.htm','test','height=589,width=1004');
};
};
code in html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<form method="post" action="http://test.ashx">
<input type="submit" value="submit" />
</form>
</body>
</html>
Thanks and looking forward to hear answers!!
You can use localStorage or sessionStorage to save information and then pass it to another page.
Below is the link for localStorage and sessionStorage examples:
http://www.w3schools.com/html/html5_webstorage.asp
Check this answer for reference:
Send value from one page to another
This is what AJAX was invented for. Not to worry, it's actually pretty simple.
The point of AJAX is that (from the first page) you send data to another file, that file does something with the data (e.g. a MySQL lookup, and create a formatted table with the data in it) and returns the result, which your code then displays back on the (first) page.
The best thing about AJAX is that it does all this behind the scenes, and the page does not change or refresh or flash. It looks professional...
Take a look at these examples to see how easy AJAX is.
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
Using AJAX to make a Login system
I have a html web page which I use to get some user input. This input is then posted using jquery to a php script which in turn sends a get request to a REST API to receive json data.
My question really is: is it possible to change my php file into another webpage with embedded php and redirect to this while posting the variables to the same script, so I could display the json results in a table on a new page simultaneously.
I already receive the json in the javascript file and I know I could use this to create a table, I was just interested if I could in fact do it all in one go on the php page as I already have script written to populate a table using the json data.
I have included some basic fragments of my code to help explain what I am doing.
HTML:
<head>
<script type="text/javascript" src="collect_User_Input.js"></script>
</head>
<p> What is the unique id of the beacon? </p>
<form> <input type="text" id="uniqueId" /> </form>
<button onclick="collect_User_Input();" >Send Request</button>
JS:
var uniqueId = document.getElementById('uniqueId');
$.post("send_Request.php", { uniqueId: uniqueId.value },function(result) {
alert(result);
PHP:
$uniqueId = $_POST["uniqueId"];
(GET request using curl)
echo ($uniqueId);
I tried skipping the javascript step and submitting the form directly, but this always gave me forbidden error messages. as you may have guessed I am very new to this so any advice is welcome.
In your PHP you will most likely want to return some JSON using json_encode:
http://php.net/manual/en/function.json-encode.php
Within your JSON, you could return a success value - then depending on the value of that you can redirect using:
window.location
You could even have a second attribute that returns what page you want the user redirected to if it isn't the same as the uniqueID:
{"success":true,"location":"/your/path/here.html"}
The flip side being, if there is an error you can return this to your page with a relevant message:
{"success":false,"message":"ID not found"}
I use this process to check something is valid on the server before doing the redirect, which sounds more or less the same as what you want to do?
I am trying to get the value of a range slider after it moves and then update my page. I have approached this by using "onchange" and calling some javascript to set a value to a text box and using php to get that value. The php does not even grab the value from the text area on load and I am not sure why. It says the id of the input text box is an "unidentified index." There might be a simple thing wrong or I may be approaching it completely wrong. I am new to this...
Here is the code for the slider.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
function printValue(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
window.onload = function() { printValue('slider1', 'rangeValue1')};
</script>
</head>
<body>
<form action='slider.php' method='get'>
<input id="slider1" type="range" min="100" max="500" step="10" onchange="printValue('slider1','rangeValue1')">
<input id="rangeValue1" type="text" size="2">
</form>
<?php
echo $_GET['#rangeValue1'];
?>
</body>
</html>
The js function does set input text box, but the php script doesn't happen. I need to get the value in PHP because the page I'm including it in is written in PHP. I don't know if, or how, the page has to be reloaded. I tried using location.reload() in the onchange function and it just continuously loaded the page.. Please help! Any input will be helpful! Thanks!
It looks like you might be getting Javascript and PHP mixed up.
PHP is run solely on your server when a browser accesses a php file. The output of the php file (like when you use echo) is sent as a webpage. However, Javascript is run solely in the browser. To make them communicate, you will need to load another webpage (or reload the current webpage). You can either use a form or directly craft the URL (probably easier in this case).
So you could do something like this inside printValue():
location.querystring="?value=" + x.value;
This will create a GET argument, which you can access with $_GET['value'], and reload the page.
EDIT: Performance Warning!
Every time the slider is moved, your server will end up resending the webpage, which could slow down the server. You might want to only send the new value after the user has clicked a button or something, in which case it would be easier to use a form.