I have a simple page where I am retrieving the data ( Categories ) from database mysql and showing it on the page. when the user selects a category I am trying to load relevant sub-categories on the page for the user to select.
mysql tables structure is fairly simple
Category Table
id catname catstatus
1 fruits true
2 vegetables true
Sub Category Table
subcatid catid subcatname subcatstatus
1 1 Apples true
2 1 Banana true
3 1 Grapes true
4 2 Potatoes true
When I am fetching Categories I am showing them in a ul tag and my ul li tag look like this
<a title="fruits" href="#" id="1">fruits</a>
and when the user clicks on this link i am fetching records based on the id using ajax
<script type="text/javascript" >
$(document).on('click', 'ul.icat li a', function(e) {
e.preventDefault();
$(".selCategory").attr("id","");
$(".selCategory").html("");
$(".selCategory").html($(this).text());
$(".selCategory").attr("id",$(this).attr("id"));
$("#mobilenumber").focus();
$('#usrselsubcategory').empty();
var ID = $(this).attr('id');
var catName = $(this).attr('title');
//alert(ID.toString());
$.ajax({
type:'POST',
url:'ajax/get_sub_category.php',
data:'catid='+ID.toString(),
success:function(html){
//alert("i am here");
$('#usrselsubcategory').append(html);
}
});
});
</script>
everything works fine but when i go to html inspect element and change the id of the anchor tag from 1 to 2 still i load the same sub categories for the id, my simple question is that is my approach correct and safe or do i need to consider avoiding ajax as i want to have more secured site. its just a simple one page website, please guide me the best approach.