带有图像按钮的 AJAX

Question

我尝试了不同的输入类型组合，但如何在不弄乱图像的情况下输入消息？目的是在不刷新页面的情况下更新表格。更具体地说，当我单击图像时，它应该更新页面一侧的表格。对于那里的许多教程，我看到人们只使用 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();
}

Answer 1

首先，您需要一个 ajax 调用，该调用向服务发布信息并获取数据并更新您的表格。

我建议你学习如何使用 jquery 和 ajax 调用。

1- 在您的 html 中定义调用方法。不要使用表单！

<img src="yourImage.jpg" onclick="getSomeData()">

2- 使用 jquery 发帖或致电您的服务。并获取数据。

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
}