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

Прежде всего вы хотите АЯКС вызов, который делает запись к обслуживать и получать данные и обновлять таблицу.

Предлагаю вам узнать, как использовать jquery и ajax call.

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 
}