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: stackoverflow.com/questions/4114742/simple-calculator-in-jsp The answer is basically a mini tutorial into using Ajax with JSP/Servlet. — BalusC
– BalusC, Commented Jun 4, 2012 at 14:51

touti · Accepted Answer · 2012-06-04 10:31:35Z

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 4, 2012 at 10:31

touti

1,1646 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TrashCan Over a year ago

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 Over a year ago

When I add an extra alert after the data function I do see both alerts

albinohrn · Accepted Answer · 2012-06-04 10:35:36Z

1

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.

answered Jun 4, 2012 at 10:35

albinohrn

6263 silver badges8 bronze badges

Collectives™ on Stack Overflow

Jquery Ajax call to servlet

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related