当值更改时，在servlet中自动获取textarea值，无需单击按钮
Get textarea value in servlet automatically without button click when value changes
每当文本区域值发生变化时，我都希望在servlet中获得文本区域值。我的页面每30秒自动刷新一次。因此，我希望textarea值每30秒自动进入servlet，而无需单击按钮。以下是我的代码：
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="refresh" content="10" />
<link rel="stylesheet" href="css/home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var x,y;
x=41.689844;
var origin = new google.maps.LatLng(x,-74.044874),
destination = new google.maps.LatLng(42.2569387,-71.0043555),
service = new google.maps.DistanceMatrixService();
var str1,str2,str3,str4;
function showlocation(){
navigator.geolocation.watchPosition(callback1);
}
function rel(){
location.reload(true);
}
function showlocation2(){
navigator.geolocation.watchPosition(callback2);
}
function callback1(position){
// document.getElementById('latitude').innerHTML=position.coords.latitude;
// document.getElementById('longitude').innerHTML=position.coords.longitude;
/* var str = 'Latitude: ' + position.coords.latitude + '<br>' +
'Longitude: ' + position.coords.longitude + '<br>' +
'Timestamp: ' + position.timestamp + '<br>'r'n' ;
document.getElementById('result').value += str;
*/
str1=position.coords.latitude;
str2=position.coords.longitude;
// document.getElementById('result1').value += str1;
// document.getElementById('result2').value += str2;
document.getElementById('result1').value = str1;
document.getElementById('result2').value = str2;
document.getElementById('originatt').value = ".";
document.getElementById('destatt').value = ".";
document.getElementById('distatt').value = ".";
document.getElementById('message1').innerHTML ="Trip Recording has started"+"<br>"+"Click Get Origin Address";
}
function callback2(position){
//document.getElementById('latitude').innerHTML=position.coords.latitude;
//document.getElementById('longitude').innerHTML=position.coords.longitude;
/* var str = 'Latitude: ' + position.coords.latitude + '<br>' +
'Longitude: ' + position.coords.longitude + '<br>' +
'Timestamp: ' + position.timestamp + '<br>'r'n' ;
document.getElementById('result').value += str;
*/
str3=position.coords.latitude;
str4=position.coords.longitude;
document.getElementById('result3').value += str3;
document.getElementById('result4').value += str4;
document.getElementById('originatt').value = ".";
document.getElementById('destatt').value = ".";
document.getElementById('distatt').value = ".";
document.getElementById('message1').innerHTML ="Trip Recording has stopped"+"<br>"+"Click to Get Destination Address";
}
service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
avoidHighways: false,
avoidTolls: false
},
callback
);
function callback(response, status) {
var orig = document.getElementById("orig"),
dest = document.getElementById("dest"),
dist = document.getElementById("dist");
if(status=="OK") {
orig.value = response.destinationAddresses[0];
dest.value = response.originAddresses[0];
dist.value = response.rows[0].elements[0].distance.text;
} else {
alert("Error: " + status);
}
}
function delay(ms) {
ms += new Date().getTime();
while (new Date() < ms){}
}
$("myform").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
</script>
</head>
<body>
<div id="img1">
<img src="images/home/logo.jpg" style="width:80%;">
</div>
<div id="main">
<form name="myform" action="TripRecorder" method="POST">
<h4> Click Start to record Origin and Stop to record Destination </h4>
<!--<span id="latitude" name="latit" hidden> </span>
<span id="longitude" hidden> </span>
<br>-->
<input type="button" name="start" class="st1" id="st" value="Start Trip" onclick="showlocation()"/>
<br><br/>
<span id="message1" name="msg1"> </span>
</br></br>
<input id="originatt" type="text" value="<%=request.getAttribute("origin5")%>" ><br><br>
<textarea id="result1" name="res1" value="str1" cols="20" rows="1" ></textarea> <br> <br/>
<textarea id="result2" name="res2" value="str2" cols="20" rows="1" ></textarea>
<input class="one" id="s1" type="submit" name="submit1" value="Get Origin Address" /> <br> <br/>
<!-- <input class="one" id="s1" type="submit" name="submit" value="Submit" /> <br> <br/> -->
<input type="submit" name="Submit" > <br>
</form>
<br>
<input type="button" value="Back to Submission Page" name="back" onclick="document.location.href='submission.jsp'" /> <br> <br/>
<h5>Check distance using Google Maps</h5>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.1219514911336!2d76.32904011409968!3d10.006784275664728!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b08729de9da66b7%3A0x3ede9e0d7ae9f2fa!2sIGA+TECH+Industrial+Electronics+Pvt+Ltd!5e0!3m2!1sen!2sus!4v1456591588301" width="100" height="100" frameborder="0" style="border:0" allowfullscreen></iframe>
<br>
</div>
</body>
</html>
<script type="text/javascript">
window.setTimeout(function() {
repeat();
}, 1);
function repeat(){
document.getElementById("st").click();
}
function showvalue(){
//var someValue = $('#lat span').text();
var div = document.getElementById("test");
var spans = div.getElementsByTagName("span");
for(i=0;i<spans.length;i++)
{
alert(spans[i].innerHTML);
}
}
function submitForm() {
document.getElementById("myform").submit();
}
document.getElementById('submit1').onclick = function() {
setTimeout(submitForm, 3000);
};
</script>
我的servlet doPost方法：
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// processRequest(request, response);
String str1=request.getParameter("res1");
String str2=request.getParameter("res2");
System.out.println("coord="+str1+"/"+str2);
RequestDispatcher view = request.getRequestDispatcher("navigator_1.jsp");
view.forward(request, response);
}
在您的jsp中使用以下内容。。。。给你的表单id，并在表单中包含你的文本区域。如果你不想在表单中包括它，你可以隐藏它，这样它就不可见，也不需要在你的页面上有任何空间。
window.setInterval(function(){
submit();/// call your function here
}, 30000);
<script language="javascript">
function submit(){
document.getElementById("myForm").submit();
}
</script>
相关文章：
- 当值更改时，在servlet中自动获取textarea值，无需单击按钮
- 如何使用Jscript | JQuery在textArea中获取插入的|删除的字符串的索引和长度
- 为什么当可见更改为false时，JQuery无法获取Textarea值
- javascript/jquery:获取textarea的更改内容
- 获取AngularJS服务中TextArea的值
- 获取带有textarea的复选框，并在单个jquery中进行选择
- 正在获取表单内部textarea的值
- 正在获取TextArea angularjs的值
- 从textarea对象获取textarea值
- 使用jquery获取textarea的值有困难
- 按类获取textarea并动态设置name
- 获取textarea值失败
- 不能使用Angular获取HTML textarea输入文本
- 从textarea获取更新后的HTML
- 在javascript的每个函数上获取textarea的不存在的id
- 从Textarea获取JSON代码并解析它
- 不能在请求中获取TextArea值，总是空的
- 在ExtJs 4.1粘贴事件中无法获取textarea字段的值
- 在 JavaScript 中获取 TextArea HTML 的值
- 使用JavaScript或jQuery获取textarea文本
