JSP面临的AJAX问题

Question

I am working on a small tool which just consists of a single JSP which is used for view as well as for processing the AJAX response.

If the call is of type 'GET', I am showing a form the user.

<form id="submitForm" method="post">
<div class="ui-widget">
<label for="tags">Please Select the Merchant : </label>
<input id="tags" name="mechant" style="width:300px;height:40px;border: 0.5px solid;border-radius: 5px;">&nbsp;&nbsp;
<input type="submit" value="Get Data" style="border: 0.5px solid;border-radius: 5px;">
</div>
</form>

And following is the code which will make the call.

$("#submitForm").submit(function() {
    $.ajax({
    url: 'serve_tx_2.jsp',
    type: 'POST',
    data: {q: $('#tags').val()},
    success: function(data) {
        $('#data').html(data);
        alert('Load was performed.');
    },
    beforeSend: function() {
       // $('.loadgif').show();
    },
    complete: function() {
       // $('.loadgif').hide();
    }
});
        //return false;
});

Once the user submits the form which goes as 'POST' the logic in the same JSP is returning the response.

Right now I am trying with a very simple logic.

response.setContentType("text/plain");  
response.setCharacterEncoding("UTF-8"); 
response.getWriter().write("Hello World");

Now when this response is return the whole of initial page is washed off and I just see "Hello World" on the page. Even though as per my understanding only the div with id "data" should be updated with value.

Kindly anyone have a look and let me know what might be going wrong here. Thanks in advance.

Answer 1

You could try preventing the default handler as well as prevent bubbling up the DOM.

$("#submitForm").submit(function(event) {
    // Prevent the default action
    event.preventDefault();
    // Pevent propagation of this event up the DOM
    event.stopPropagation();
    $.ajax({
        url: 'serve_tx_2.jsp',
        type: 'POST',
        data: {q: $('#tags').val()},
        success: function(data) {
            $('#data').html(data);
            alert('Load was performed.');
        },
        beforeSend: function() {
            // $('.loadgif').show();
        },
        complete: function() {
            // $('.loadgif').hide();
        }
    });
    //return false;
});