CODEWITHSUNDEEP
ajaxjspservlets
TrashCan
TrashCan

Reputation: 817

Jquery Ajax call to servlet

I am trying to make an Ajax call using JQuery to a servlet that returns a JSON object. In the JSP page I have a form, at first I didn't know how the get the data from the form, then I found .serialize.

I have the following JavaScript:

$(document).ready(function() {
    $("#submit").click(function blabla() {
        var formData = $('form').serialize();
        $.ajax({
            type: "POST",
            url: "/ArchiveSearch/Search",
            dataType: "json",
            data: formData,
        });
    });
});

The information comes from the following form:

<form method= post">
            <div class="searchCiteria">
                <div id="searchValueBlock1">
                        <div><span class="label">Case ID:</span><input type="text" name="messagecaseid"  size="25"/></div>
                        <div><span class="label">Onderwerp:</span><input type="text" name="messagesubject" size="25" /></div>
                        <div><span class="label">Afzender:</span><input type="text" name="messagesender"  size="25"/></div>
                        <div><span class="label">Ontvanger:</span><input type="text" name="messagereceiver"  size="25"/></div>
                </div>

                <div id= "searchValueBlock2">
                    <div><span class="label">Datum:</span><input type="text" name="date1"  size="25"/></div>
                    <div><span class="label"></span><input type="text" name="date2"  size="25"/></div>

                    <div class="submit">
                        <input type="submit" value="Search"> 
                    </div>
                </div>
            </div>
            </form>

When I use the action parameter in the form the servlet repondes like it should. But I can't seem to get the Ajax call to work.

What am I doing wrong?

Upvotes: 2

Views: 4838

Answers (2)

albinohrn
albinohrn

Reputation: 626

The default behavior of the submit button is to POST the form, which will redirect the user to a URL of the action attribute ond the form. When you don't(which you should...) have an action attribute it will reload the page. To prevent the page from reloading you need to prevent the default behavior by returning false at the end of your $("#submit").click function.

Upvotes: 1

touti
touti

Reputation: 1164

you must add the success param to ajax function 

$.ajax({
            type: "POST",
            url: "/ArchiveSearch/Search",
            dataType: "json",
            data: formData,
 success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Upvotes: 1

Related Questions