带图像按钮的AJAX
带图像按钮的AJAX
提问于 2015-04-01 03:28:23
我已经尝试了不同的输入类型组合，但我如何才能在不弄乱图像的情况下输入消息？其目的是在不刷新页面的情况下更新表。更具体地说，当我单击图像时，它应该会更新页面一侧的表格。在许多教程中，我看到人们只使用onclick来调用ajax函数。有没有一个很好的例子来说明我可以用图像按钮代替普通按钮呢？
例如：
<form name="bakery" action="TestMartController" method="post" >
<input type="hidden" name="action" value="dairy">
<input type="image" src="<%=request.getContextPath()%>/css/categories/dairy.jpg" onclick="loadXMLDoc">我想要更新的表是
<div id="refresh">
<table class="rightTable" border="1" width="70%">
<tr>
<th>Photo</th>
<th>Product and Description</th>
<th>Price</th>
<th>Orders</th>
<th>Quantity</th>
<th>Edit Quantity</th>
<th>Add Item </th>
</tr>
<c:forEach var="b" items="${bakery}">
...
</c:forEach>
</table>
</div>Javascript文件
function loadXMLDoc()
{
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 ) {
if(xmlhttp.status == 200){
document.getElementById("refresh").innerHTML = xmlhttp.responseText;
}
else if(xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("POST", "bakery.jsp", true);
xmlhttp.send();
}回答 1
Stack Overflow用户
发布于 2015-04-01 03:38:43
首先，您需要一个ajax调用，该调用将post发送到服务，并获取数据和更新表。
我建议您学习如何使用jquery和ajax调用。
1-在html中定义调用方法。不要使用表单！
<img src="yourImage.jpg" onclick="getSomeData()">2-使用jquery对您的服务进行post或get调用。并获取数据。
function getSomeData(){
var url = "http://url";
$.post(url,{data:data})
.done(function(data){
//this data is your call result.
//do something
updateTable(data);
})
.fail(function(){
console.log('fail');
});
} 3-创建gui函数来更改表。
function updateTable(){
//update your htmls
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29376907
复制相关文章
相似问题
腾讯云开发者
