Hi I need to know how to read a API from pop up window.
Here is my popup window
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<b>Enter your Email ID and Password</b><br><br>
<form id="userinfo">
<label for="user"> Email : </label>
<input type="text" id="user" /><span id="semail"></span>
<br><br>
<label for="pass">Password : </label>
<input type="password" id="pass" />
<br>
<br>
<input type="button" id="login" value="Log In"/>
</form>
</body>
</html>
Here is my test.js
window.addEventListener('DOMContentLoaded', function() {
var user = document.querySelector('input#user');
var pwd = document.querySelector('input#pass');
var login = document.querySelector('input#login');
login.addEventListener('click', function() {
var userStr = user.value;
var pwdStr = pwd.value;
var req = getHTTPObject();;
var url="http://blog.calpinetech.com/test/index.php";
req.open("GET", url);
req.send(null);
if (req.status == 200) {
var item=req.responseText;
alert(item);
}
window.close();
chrome.runtime.getBackgroundPage(function(bgPage) {
bgPage.updateIcon();
});
});
});
Here when I click on the log in button it has to read the API(server file named "http://blog.calpinetech.com/test/index.php"). How can I do it?Please help me
Btw, Any reason of not using XMLHttpRequest to make AJAX calls ?
Sample in your event listener could be helpful:
var userStr = user.value,
pwdStr = pwd.value,
url="http://blog.calpinetech.com/test/index.php";
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReq.open('POST', url, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.send("username="+userStr+"&passwd="+pwdStr);
/** Handle your response here */
Related
I'm new to Javascript, can I use XMLHttpRequest() after I hit submit from form but the result should be the same as onclick event. I have a function named get and by using XMLHttpRequest() I can add a new object within the div sample, it works if it's a button. The only difference is that I want to add new object to the div sample without redirecting to http://127.0.0.1:5000/get?query=apple after I submit the form, form and function get() should be working together in this case. And also I don't want to see the http://127.0.0.1:5000/get?query=apple in the browser's url field after I submit the form. I need some help, I push myself to use pure js as possible and not to rely on jquery.
<div id="sample"></div>
<div onclick="get('apple');">CLICK APPLE</div>
<form action="/get" method="GET">
<input name="query">
<input type="submit">
</form>
<script>
function get(query) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sample").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "get?query=" + query, true);
xhttp.send();
};
</script>
This is how you can interrupt submit event, and do whatever you want.
<div id="sample"></div>
<div onclick="get('apple');">CLICK APPLE</div>
<form id="form">
<input name="query">
<input type="submit" value="Submit">
</form>
<script>
document.querySelector('#form').addEventListener('submit', function(e){
e.preventDefault();
var query = e.target.elements['query'].value;
get(query);
});
function get(query) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sample").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "get?query=" + query, true);
xhttp.send();
};
</script>
function get(query) {
console.log("Called Function");
query = document.getElementById('query').value;
console.log(query);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sample").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "get?query=" + query, true);
xhttp.send();
};
<div id="sample"></div>
<div onclick="get('apple');">CLICK APPLE</div>
<form id="myForm" action="/get" method="POST">
<input type="text" name="query" id="query">
<input type="button" onclick="get()" value="Submit form">
</form>
You have user Form type method="GET" which changed to method="POST" and added onclick="get()" to call the function from javaScript
I have a HTML file:
function runBatch() {
document.form2.w_yyyymm.value=document.form1.w_yyyymm.value;
window.open('', 'TheWindow2')
document.form2.submit();
document.form3.w_yyyymm.value=document.form1.w_yyyymm.value;
window.open('', 'TheWindow3')
document.form3.submit();
document.form4.w_yyyymm.value=document.form1.w_yyyymm.value;
window.open('', 'TheWindow4')
document.form4.submit();
}
<form name="form2" method="post" action="reportm02.do" ><input name="w_yyyymm" type="hidden" >
<input name="method" value="view" type="hidden" >
<input name="w_goods_id" value="9999" type="hidden" >
</form>
<form name="form3" method="post" action="reportm02.do" ><input name="w_yyyymm" type="hidden" >
<input name="method" value="view" type="hidden" >
<input name="w_goods_id" value="TX" type="hidden" >
</form>
<form name="form4" method="post" action="reportm02.do" ><input name="w_yyyymm" type="hidden" >
<input name="method" value="view" type="hidden" >
<input name="w_goods_id" value="TE" type="hidden" >
</form>
<input type="button" name="Submit3" value="run batch" onClick="runBatch();" >
Either Form submit will get a xls file , So I want to get all xls files on click one button. I try ajax but all fail~ How can I do? Thank you !!
function ajaxSubmit(form)
{
var f = form;
var postData = [];
for (var i = 0; i < f.elements.length; i++) {
postData.push(f.elements[i].name + "=" + f.elements[i].value);
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "reportm02.do", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(postData.join("&"));
}
function runBatch() {
ajaxSubmit(document.form2);
ajaxSubmit(document.form3);
ajaxSubmit(document.form4);
}
.. But no xls file download to client side.
I also try the following code but still not work:
// Download a file form a url.
function saveFile(url) {
// Get file name from url.
var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var a = document.createElement('a');
a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
a.download = filename; // Set the file name.
a.style.display = 'none';
document.body.appendChild(a);
a.click();
delete a;
};
xhr.open('GET', url);
xhr.send();
}
I try the following code:
http://danml.com/download.html
And include the download.js from it as following:
<script language="JavaScript" src="js/download.js"></script>
<Script language="JavaScript">
function saveFile(url,filename) {
//
// Get file name from url.
//var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
var x=new XMLHttpRequest();
x.open("GET", url, true);
x.responseType = 'blob';
x.onload=function(e){download(x.response, filename, "text/plain" ); }
x.send();
}
function runBatch() {
if (!date_check_yyyymm(document.form1.w_yyyymm, "申報年月")) {
return false;
}
saveFile("ReportMIB.do?method=view&w_yyyymm="+document.form1.w_yyyymm.value+"&w_goods_id=9999","880103_"+document.form1.w_yyyymm.value+"_9999.xls" )
saveFile("ReportMIB.do?method=view&w_yyyymm="+document.form1.w_yyyymm.value+"&w_goods_id=TX","880103_"+document.form1.w_yyyymm.value+"_TX.xls" )
saveFile("ReportMIB.do?method=view&w_yyyymm="+document.form1.w_yyyymm.value+"&w_goods_id=TE","880103_"+document.form1.w_yyyymm.value+"_TE.xls" )
.....
}
</script>
This will work on the Chrome browser but IE and firefox.
How do you insert the correct "xhr" value into the HTML5 button?
I am not sure how this whole XMLHttpRequest works. I believe it takes: xml data, text, numbers or null from the HTML5 button input and prints it out in text input in this case but can it store a value in it to call on it later. That is the question!
<script type="text/javascript">
function readBody(xhr) {
var data;
if (!xhr.responseType || xhr.responseType === "text"){
data = xhr.responseText;
} else if (xhr.responseType === "document") {
data = xhr.responseXML;
} else {
data = xhr.response;
}
window.document.myform.xhr1.value = data;
return data;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200); {
window.document.myform.readBodyxhr.value = readBody(xhr);
}
else {
alert(xhr.status);
}
xhr.open('GET', 'http://www.google.com', true);
xhr.send(null);
}
</script>
...HTML5
<input type="button" name="XMLHttpRequest" value="XMLHttpRequest" onclick="readBody(xhr)" />
<input type="text" name="xhr1" value="" size="4"/></td>
<input type="text" name="readBodyxhr" value="" size="4"/></td>
Move call to .open() and .send() outside of onreadystatechange handler.
Substituted onload and onerror for onreadystatechange. ; following if condition is a syntax error. Note also, XMLHttpRequest with true passed at third parameter at .open() sets load handler to return results asynchronously.
<script type="text/javascript">
var url = "https://gist.githubusercontent.com/guest271314/6a76aa9d2921350c9d53/raw/1864137bfd2eb62705bd0e71175048a28b3253e6/abc.txt";
function readBody() {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
window.document.myform
.readBodyxhr.value = xhr.responseText;
}
xhr.onerror = function() {
alert(xhr.status);
}
xhr.open("GET", url, true);
xhr.send(null);
}
</script>
...HTML5
<form name="myform">
<input type="button" name="XMLHttpRequest" value="XMLHttpRequest" onclick="readBody()" />
<input type="text" name="xhr1" value="" size="4" />
<input type="text" name="readBodyxhr" value="" size="4" />
</form>
This code is a part of my application, doesn't work on the tizen device while it work normally on the tizen simulator ... can anyone have a look and tell me why!! If it's a problem with the balise form or with the dom parser! Can anyone tell me how to solve it?
thx
<!DOCTYPE html>
<head>
</head>
<body>
<div id="result">
</div>
<div align="center">
<form name="myForm">
<button type="submit">go</button>
</form>
</div>
<script>
//var doc;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.sntri.com.tn/html_ar/result_tarif_horaire_sntri.php', true);
//xhr.setRequestHeader('Origin', 'www.sntri.com.tn');
//xhr.setRequestHeader('Allow-Control-Allow-Origin', '*');
xhr.send();
xhr.onreadystatechange = function() {
if(4 === xhr.readyState) {
if(200 === xhr.status) {
var parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, 'text/html');
var myForm = document.forms.myForm;
//console.log(doc);
var selectDep = doc.getElementsByName('code_arret_dep')[0];
var selectArr = doc.getElementsByName('code_arret_arr')[0];
doc.getElementBy
//console.log(select);
myForm.appendChild(selectDep);
myForm.appendChild(selectArr);
//console.log(xhr.responseText);
myForm.onsubmit = function(e) {
e.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.sntri.com.tn/html_ar/result_tarif_horaire_sntri.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('code_arret_dep='+selectDep.value+'&code_arret_arr='+selectArr.value);
xhr.onreadystatechange = function() {
if(4 === xhr.readyState) {
if(200 === xhr.status) {
var parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, 'text/html');
var result = document.getElementById('result');
var tablex = doc.getElementById('tablex');
//console.log(doc);
result.appendChild(tablex);
//console.log(xhr.responseText);
}
}
}
console.log(selectDep.value);
console.log(selectArr.value);
}
}
}
};
</script>
</body>
Do you add the internet privilege?
You can add the privilege in config.xml.
Open the config.xml on Tizen IDE.
Select the privileges tap.
Click the 'Add' button.
Select the http://tizen.org/privilege/internet
Run your application.
I've created the code below, but it is not working properly. Where have I gone wrong and or what did I forget to include?
var search = document.getElementById("search").value;
var xhr = new XMLHttpRequest();
function results() {
console.log(search);
xhr.send()
}
document.getElementById("results").innerHTML = results();
// Send the XHR
xhr.open('GET', 'https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search;', true);
<html>
<head>
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<input type="search" id="search" />
<button onclick="results()">Search</button>
<p id="results"></p>
</body>
</html>
Your code will run on page-load but you want to create an event listener that waits for your user to press Search and then execute your request.
Try:
$('#search').click(function(){
var search = document.getElementById("search").value;
var xhr = new XMLHttpRequest();
var results = xhr.open('GET', 'https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search;', false);
document.getElementById("results").innerHTML = results;
})
The 'false' parameter in the xhr request prevents the code from running asynchronously but I am sure you could somehow use callbacks?
Figured it out...
function audioResults(){
var search = document.getElementById("search").value;
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search, false);
xhr.addEventListener("load", function() {
document.getElementById("results").innerHTML = xhr.response;
}, false);
xhr.send();
}
<html>
<head>
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<input type="search" id="search" />
<button onclick="audioResults()">Search</button>
<p id="results"></p>
</body>
</html>