Why is ajax request not working?

Question

JavaScript

I'm trying to connect ajax to my webapp, but so far to no avail, I'm doing it for the first time, so don't swear much ...
in general, when you click on the button, nothing happens at all, how can I make it work ??
there is jsp it has this code

<script type="text/javascript">
        console.log('zashol');
        $(document).ready(function() {
            $('#btn_add').click(function() {
                console.log('ololo');
                var model = $('#model').val();
                var smodel = $('#smodel').val();
                var idproduct = $('#idproduct').val();
                var cost = $('#cost').val();
                var type = $('#type').val();
                $.ajax({
                    type: 'POST',
                    date: {model: model, smodel: smodel, idproduct: idproduct, cost: cost, type: type},
                    url: 'http://localhost:8085/galery/bikes', --- Вот здесь, что сюда поставляется, Имя сервлета или урл на котором сервлет замаплен??? пробовал все подставить но безрезультатно...
                    success: function(result) {
                        $('#resultil').html(result);
                    }

                });
            });
        });
    </script>

Вот здесь загружаю на jsp всю информацию doGET - ом, мне нужно по нажатию кнопки что бы товар добавился в корзину!  
<div class="gallery_bikes">
        <c:forEach items="${requestScope.allbikes}" var="bike">
            <figure>
                <a href="${pageContext.request.contextPath}/galery/bikes/products/bike?
              id=${bike.id}&model=${bike.model}&smodel=${bike.smodel}">
                    <img src="${pageContext.request.contextPath}/${bike.path1}">
                </a>
                <figcation>
                    <p>${bike.model} ${bike.smodel}</p>
                    <p>${bike.price}</p>
                </figcation>
            </figure>
                    <form>
                    <input type="hidden" name="model" value="${bike.model}" id="model"/>
                    <input type="hidden" name="smodel" value="${bike.smodel}" id="smodel"/>
                    <input type="hidden" name="idproduct" value="${bike.id}" id="idproduct"/>
                    <input type="hidden" name="cost" value="${bike.price}" id="cost"/>
                    <input type="hidden" name="type" value="bike" id="type"/>
                    <input type="button" value="Добавить в корзину" id="btn_add">
                    <span id="resultil"></span>
            </form>
        </c:forEach>
    </div>

If you have any ideas, I'd love to hear them, thanks!

Answer 1

First, I'm not sure you really need AJAX in this case. Perhaps a simple submit of the form will suffice. Secondly, you have a typo in the $.ajax parameters, it should be data, not date. Third, make sure there is a servlet on the server side with a doPost method that is ready to process your request.