带图像按钮的AJAX

Question

I have tried different combinations of input type but how am I able to input a message without messing up the image? The purpose was to update the table without refreshing the page. To be more specific, when I clicked the image it should update the table on the side of the page. For many of the tutorial out there I saw people only use for onclick to call the ajax functions. Is there a good example for what I can do for the image button instead of the plain button?

For example:

<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">

The table I want to update is

<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 file

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

First of all you want a ajax call which makes post to a service and get datas and update your table.

I suggest to you learn how to use jquery and ajax call.

1- In your html define call method. Don't use form!

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

2- Make post or get call to your service with jquery. And get Data.

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- Create your gui function to change table.

function updateTable(){
//update your htmls
}