AJAX сообщение в базу данных - несколько кнопок отправки?

Question

Я только начал работать с javascript и ajax. Так что это, вероятно, новичок, но я не смог найти правильное решение.

Я хочу отправить идентификатор скрипту php через ajax. это прекрасно работает до сих пор (я нашел в интернете)

ЯШ:

$(function() { 
    $(".add_button.click(function() { 
     var element = $(this); 
     var test = $("#submitid").val();  
     var dataString = 'content='+ test; 
     $.ajax({ 
      type: "POST", 
      url: "ajax_addlink.php", 
      data: dataString, 
      cache: false 
     }); 
     return false; 
    }); 
}); 

PHP

<form method="post" name="form" action=""> 
    <input type="submit" value="'.$value.'" id="submitid" name="submit" class="add_button"/> 
</form> 

Проблема заключается в том, что я хочу иметь несколько кнопок на моей странице, в зависимости от моих записей в db (скажем, у меня 5 записей в моей базе данных «test», тоже будет 5 кнопок.) Код выше не работает для этого isuue, так как все кнопки имеют одинаковый идентификатор.

Вот как я решил эту проблему: я прошел различные идентификаторы и классы:

$i=1; 
while($r=mysql_fetch_array($q)){ 
    echo ' <form method="post" name="form" action=""> 
       <input type="submit" value="'.$value.'" id="submitid'.$i.'" class="add_button'.$i.'"/> 
      </form>'; 
    $i++; 
} 

и

<?php for ($i = 1; $i <= $max_i; $i++) { ?> 
<script type="text/javascript"> 
$(function() { 
    $(".add_button<?php echo $i?>").click(function() { 
     var element = $(this); 
     var test = $("#submitid<?php echo $i?>").val(); 
     var dataString = 'content='+ test; 
     $.ajax({ 
      type: "POST", 
      url: "ajax_addlink.php", 
      data: dataString, 
      cache: false 
     }); 
     return false; 
    }); 
}); 
</script> 
<?php } ?> 

Это на самом деле работает, но я думаю, что это не очень чистое решение, потому что тогда я имеют как 50 < сценарий> </сценарий> коды в конце.

Любые идеи, как это сделать лучше?

Answer 1

Ваш первый способ практически отсутствует. $(".add_button") получает все элементы с классом add_button, и этот код свяжет все кнопки с обработчиком событий. Нет необходимости использовать идентификаторы.
Javascript:

$(".add_button").click(function() { 
     var dataString = 'content='+ $(this).val(); 
     $.ajax({ 
      type: "POST", 
      url: "ajax_addlink.php", 
      data: dataString, 
      cache: false 
     }); 
     return false; 
    }); 

PHP

<form method="post" name="form" action=""> 
    <input type="submit" value="'.$value.'" class="add_button"/> 
</form>