Question

我正在开发一个小工具，它只包含一个JSP，用于视图以及处理AJAX响应。

如果通话类型为“GET”，我正在向用户显示表单。

<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>

以下是进行通话的代码。

$("#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;
});

一旦用户提交了作为“POST”的表单，同一JSP中的逻辑就会返回响应。

现在我正在尝试一种非常简单的逻辑。

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

现在当这个响应返回时，整个初始页面都被清除了，我只看到页面上的“Hello World”。即使根据我的理解，只有id为“data”的div应该用值更新。

请有人看看，让我知道这里可能出现的问题。提前谢谢。

Answer 1

您可以尝试阻止默认处理程序以及阻止冒泡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;
});

面对JSP的AJAX问题

1 个答案: