Jquery Ajax call to servlet

Question

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?

Related: http://stackoverflow.com/questions/4114742/simple-calculator-in-jsp The answer is basically a mini tutorial into using Ajax with JSP/Servlet. — BalusC, Jun 04 '12 at 14:51

score 1 · Accepted Answer · answered Jun 04 '12 at 10:31

1

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.');
  }
});

answered Jun 04 '12 at 10:31

touti

1,164
6
18

It worked, the data var holds the response from the server right, im am asking because, when I do succes: function(data){alert(data)} I dont see any pop-up window – TrashCan Jun 04 '12 at 11:59
When I add an extra alert after the data function I do see both alerts – TrashCan Jun 04 '12 at 12:04

score 1 · Answer 2 · answered Jun 04 '12 at 10:35

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.

Jquery Ajax call to servlet

2 Answers2