I'm trying to send some rendered HTML to the backend, through ajax, using javascript or jquery, but I can't find the way to do it.
I'm trying to export that html to pdf using itext.
Is there any way that I can achieve this, sending the data as a String?.
Many thanks.
(I'm using Java and Spring on the backend)
You can send you HTML as a JSON object. Here a quick example.
var elm = document.getElementById('yourElement');
var value = elm.innerHTML;
var objToSend = JSON.stringify(value);
// now send using ajax
...
Related
Can I send a file as multipart by XMLHttpRequest to a servlet?
I am making a form and submitting it as multipart, but somehow I am not getting a response for successfully uploading it. I do not want the page to be refreshed, so it has to take place by Ajax.
That's only possible with the XHR FormData API (previously known being part of as "XHR2" or "XHR Level 2", currently known as "XHR Advanced Features").
Given this HTML,
<input type="file" id="myFileField" name="myFile" />
you can upload it as below:
var formData = new FormData();
formData.append("myFile", document.getElementById("myFileField").files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "myServletUrl");
xhr.send(formData);
XHR will take care about proper headers and request body encoding and the file will in this example be available on the server side as form-data part with the name myFile.
You need to keep in mind that FormData API is not supported in older browsers. At caniuse.com you can see that it's currently implemented in Chrome 7+, Firefox 3.5+, Safari 5+, Internet Explorer 10+ and Opera 12+.
In case you're using jQuery, then you might be tempted to use its $.val() function as below:
formData.append("myFile", $("#myFileField").val());
But this is incorrect as it doesn't return the whole File object, but merely the file name as String which is utterly useless as it doesn't contain the file contents.
If you don't want to use document.getElementById() for some reason, then use one of the following instead:
formData.append("myFile", $("#myFileField").prop("files")[0]);
formData.append("myFile", $("#myFileField")[0].files[0]);
An alternative is to use the jQuery Form plugin. Your entire form, when written and functioning properly without any line of JavaScript code, will then instantly be ajaxified with just the following line:
$("#formId").ajaxForm(function(response) {
// Handle Ajax response here.
});
It also supports file uploads as well by a hidden iframe trick. See also this jQuery Form documentation for an in-depth explanation. You may only need to change the servlet code to be able to intercept on both normal (synchronous) and Ajax (asynchronous) requests. See also this answer for a concrete example: Simple calculator with JSP/Servlet and Ajax
Either way, the uploaded file should then be available in the doPost() method of a #MultipartConfig servlet as follows:
Part myFile = request.getPart("myFile");
Or if you're still on Servlet 2.5 or older, use Apache Commons FileUpload the usual way. See also this answer for a concrete example: How can I upload files to a server using JSP/Servlet?
It's not possible to send multipart/form-data with XMLHttpRequest (though it is possible in modern browsers, with XHR2. See BalusC's answer).
A common way to achieve what you want is to use a regular form, but in an iframe instead. This way, only the iframe is refreshed on upload.
I implemented a SOA service using other services(I'm using java language). I use servlet to display an html table with the processed results. Is it also possible to send json with html? or in other words is it possible to send two different things in the response of the doPost method of httpservlet?
If you want your html page to access the json you could embed the data within a script tag:
<script type="application/javascript">
var mydata = {"foo":"bar"};
</script>
Normally I create html text dynamically using javascript. See sample
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
element1.className = "textfield"
element1.size = "15"
element1.value = "something"
cell2.appendChild(element1);
But my problem is create struts 1.3 text field dynamically using javascript.I try this but not ok especially elements.value instead of Struts 1.3 property attribute.Is it possible to create struts 1.3 text field using javascript not jquery?
Struts tags have to be processed on the server before it is sent back to the client machine browser as HTML. JavaScript can only manipulate HTML tags on the client Side.
I am getting huge length data on finaldata.Tha data is going through url .if the data is too big then it will get error. beacuse url have limit to send data.
so what is alternative to send data to my java class .
This my function on my jsp page
function downloadAttachment(format){
var alterTrans= GetXmlHttpObject();
var finaldata=callRebuilder(format);
alert("finaldata : "+finaldata);
var url= "/jmax/settargetOutput.action?finalTargetTxt="+finaldata;
}
What is the alternative for sending data through url?
Please use form submission on that with post. Please use hidden tag for that value and submit the page. In that action class you will get from form.
I'm trying to get value from Action using Ajax request, but I'm having problem in using struts tag in javascript to show the value.
Javascript code:
dojo.xhrPost({
url: "dashboard"
,content: myParameterscomp
, handle: function(response, ioargs) {
if (ioargs.xhr.status == 200)
{
var data = "<s:property value='#request.consumptionData'/>"
console.log(data);
}
}
,error: function (data) {
handleError(data.description);
}
});
Java code:
Map request = (Map)context.get("request");
request.put("consumptionData", 43);
I'm getting the value of data as <s:property value='#request.consumptionData'/> on console instead of 43. I'm using struts2. My javascript code is in JSP file. Could anyone please tell me how can I show the value?
You seems to be calling /dashboard page via Ajax from your homepage. And expecting it to send you request attribute consumptionData. This won't work as your JSP does not contain required data. You need to put data in JSP and then fetch the same in Ajax. Convert your response to JSON. The simplest way of doing this would be to put following like of code in your Ajax response JSP.
Dashboard.jsp
{"consumptionData": < "<s:property value='#request.consumptionData'/>"}
And in main page when you load this JSP via ajax, you can parse this JSON output and use data in Javascript.
var json = JSON.parse(response);
var data = eval(json.consumptionData);
Code in browser accepts JSON. You could serialize you request as JSON and embed in you JavaScript file. For example:
var data = <%= toJson(request.get("consumptionData")) %>
If the data is simplely Integer values, you can even directly put the value in the code:
var data = <%= request.get("consumptionData") %>
The syntax could be vary (I'm not familiar with struts tag), but the idea is the same.