sending image as a parameter in xmlhttprequest Post method failed - javascript

I am new to JavaScript. In this first i sent successfully some data as a parameters in xmlhttprequest post method. But after that i am trying to send Image as a parameter but this time the post method fails.Here i am using content-type as a multipart/form-data
I am successfully sent image as a parameter in post method.But this time i used <form> tag.
Please any one tell me about this? why my first procedure fails?
function store(){
var pname=document.getElementById("pname").value;
var price=document.getElementById("price").value;
var discount=document.getElementById("discount").value;
var desc=document.getElementById("desc").value;
var heading=document.getElementById("heading").value;
var image=document.getElementById("image").value;
var params="pname="+pname+"&price="+price+"&discount="+discount+"&desc="+desc+"&heading="+heading+"&image="+image;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var txt=xmlhttp.responseText;
var obj = eval ("(" + txt + ")");
if(obj.success)
{
userlogin(obj.username,obj.password);
}
else
document.location.href="Userregistration.jsp";
//document.getElementById("countryname").innerHTML=obj.CurrencyById[0].country;
alert("Registered");
}
}
xmlhttp.open("POST","Newproduct",true);
xmlhttp.setRequestHeader("Content-type", "multipart/form-data");
xmlhttp.send(params);
}

Related

HTTPRequest ajax error with slesh in end of Uri in codeigniter

Help guest...
i make web using framework Codeigniter and also using ajax XMLHttp Request to load some data from DB.
if i open the link Like this
localhost/web/topsales
every things is OK like this. Images
but if i add slash in end of url
localhost/web/topsales/
the result is error. Ajax load and duplicate the pages view like this image
i use AJAX XMLHttp Request for load the data:
function showdata()
{
var idunit = document.getElementById('idunit').value;
var month = document.getElementById('month').value;
var year = document.getElementById('year').value;
var xmlhttp;
document.getElementById("result").innerHTML = "<div class='text-center'>Loading...</div>"; //xmlhttp.responseText
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML = xmlhttp.responseText; //xmlhttp.responseText
}
}
xmlhttp.open("POST","showresult",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("idunit="+idunit+"&month="+month+"&year="+year);
}
please i need help, thanks so much for some advice.

save url responce into variable with javascript / html

in a webpage i would like to collect a response from another web server at a given URL address.
let's say someone else has a server at http://mysite/123 that responds with a simple string. (without headers and stuff).
what is the most SIMPLE way to get javascript on my webpage to collect a url's raw response in preferably a byte array variable? though i would except an answer that saves in string to get me going. this is an exact copy paste from my html document and its not working for me.
thanks!
<script>
var txt = "";
txt=httpGet("https://www.google.com");
alert(txt.length.toString());
function httpGet(theUrl) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", theUrl, false);
xmlhttp.send();
}
</script>
So I'd have to say your best bet would be to look into making an HTTP (or XHR) request from javascript.
check: Return HTML content as a string, given URL. Javascript Function
function httpGet(theUrl)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", theUrl, false );
xmlhttp.send();
}

Error incorrect function in XMLHttpRequest.open() method

I done a ajax call to local http server but I got error in xmlhttp.open("GET", "http://localhost//push", true); incorrect function in IE 11, Below is my full code:
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
....some code.....
}}
}
xmlhttp.open("GET", "http://localhost//push", true);
xmlhttp.send();
}
IE uses new XMLHttpRequest();
Finally i got the answer very silly issue, In chrome URL can be "http://localhost//push" but in IE it should have backslash instead of forward slash "http:\\localhost\\push" or else it will show incorrect function

Javascript - read data from multiple files in sequence

I have a function ReadFromFile that reads from a single file on server.
How do I write a function, that can read from multiple files on server and save data from each file in separate variable in sequence?
// Update measure data from files
function ReadFromFile(filename)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
dataset_01 = xmlhttp.responseText;
}
}
xmlhttp.open("GET", filename, true);
xmlhttp.send();
}

Making 2 xmlhttp.open calls in javascript function

I have a website that uses a javascript function below to populate List 2 when an item from the drop down List 1 is chosen. What I would like to achieve is to have List 2 and List 3 updated. The function is shown below works for both List 2 and List 3 separately but using an alert I can see that it stops after the first send if I put them together. How can I am make them both work together?
This is the Select that calls the function checkTeacherList which is working fine.
<select name="department_list" id="department_list" selected="All" onchange="checkTeacherList(this.value, '<?php echo $user_login;?>');" >
Th eJavaScript function checkTeacherList
<script type="text/javascript">
function checkTeacherList(departmentName, schoolName)
{
var xmlhttp;
//populating List 2
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("departmentTeachers").innerHTML=xmlhttp.responseText;
}
}
var d = new Date();
xmlhttp.open("GET","http://website/getTeachers1.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
xmlhttp.send();
xmlhttp.send();
//populating List 3
alert("Is it getting this far?"); // this alert does not get reached
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("nondepartmentTeachers").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://website/getTeachers2.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
xmlhttp.send();
xmlhttp.send();
}
</script>
The alert is not called because you are calling "xmlhttp.send();" twice.
The second call yields an error.
it is not really a good way to solve this problem. I should focus on setting up ONE AJAX connection , that the script just have to ask one connection.
The major advantage of using this method is the time required to gather all data. It will be double faster then doing it twice.
However, i am not sure if you can modify the php files.
If so, please edit it. I have noticed that both requests contains of same parameters.
in js;
// function to fill option
var fillOptions = function(data) {
// use data to fill drop down boxes
var teacher1 = data["teacher1"]; // get $teacher1 which is in 'teacher1'
var teacher2 = data["teacher2"]; // get $teacher2 which is in 'teacher2'
}
// function to check teacher list
function checkTeacherList(departmentName, schoolName)
{
// create object by browser type
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
// for IE6, IE5
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
// event when request is done
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// get data
var data = JSON.parse(xmlhttp.responseText);
// send to function to handle it
fillOptions(data);
}
}
// open link
xmlhttp.open("GET","http://website/getAllTeachers.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
// send
xmlhttp.send();
}
and in getAllTeachers.php ( a new php file, but you can wrap your two php file in one if you want)
$teacher1 = ... // teacher1 list
$teacher2 = ... // teacher2 list
// return with a JSON type
header('Content-Type: application/json');
// reply with json format
echo json_encode(array('teacher1' => $teacher1, 'teacher2' => $teacher2));
The php file will reply with data in JSON-format. In the js, you can see that the response is being handled with JSON.parse() function and being passed to fillOptions(data) function. There, you can access data submitted by php and use the same data to fill in your dropdown box.
(i don't know the response content, but
document.getElementById("nondepartmentTeachers").innerHTML = data["teacher2"];
should achieve the same result as intended )
If you want to go with your solution, you have called .send() function twice, which the second one will return into errors.

Categories

Resources