Ajax Servlet問題

Question

這裏的問題是，如果我進行搜索，結果會在返回後立即返回，然後頁面將更改爲帶有json原始數據的servlet。 我很困惑。

這個JSP提交表單

<form class="col-lg-12" action="./urllinks" method="GET" id="searchform"> 

         <div class="input-group" 
          style="width: 340px; text-align: center; margin: 0 auto;"> 
          <input class="form-control input-lg" title="Make a wish !." 
           placeholder="Go on and search ! Don't be shy :p" type="text" id="box" 
           name="query"> <span class="input-group-btn"><button 
            class="btn btn-lg btn-primary" id="searchresult" type="submit">Search</button></span> 
         </div> 

</form> 

這是Servlet的doGet

String word = request.getParameter("query"); 
    List<Page> results = DynamoDbMethods.search(word); 

    String reply = new Gson().toJson(results); 

    response.setContentType("text/json"); 
    response.setHeader("Cache-Control", "no-cache"); 
    response.getWriter().write(reply); 

這是JavaScript AJAX

$('#searchform').submit(function(){ 
      var query = $("#box").val(); 

     // alert(query); 
      $.ajax({ 
       target:"#map", 
       dataType: "json", 
       type: 'GET', 
       data:{query: query}, 
       url: 'http://localhost:8080/path/urllinks', 
       success: function(response) { 
        successCallback(response);} 

      }); 
     }); 

function successCallback(responseObj){ 
    #This function just prints the data on a table 
    #e.g 
$.each(responseObj, function(index, element){ alert(element.title);} 

} 

我試圖消除：action="./urllinks" method="GET"但是然後沒有數據

Answer 1

看起來像你還沒有阻止從觸發的默認非Ajax表單提交。

你的函數可以帶一個事件參數，你可以使用它來防止默認值。

$(document).ready(
    function() { 
     $('#searchform').submit( 
      function(event) { 
       event.preventDefault(); 
       //rest of code 
      } 
     ); 
    } 
); 

在下面實際上有一個jquery插件，您可以將所有樣板文件減少爲幾行js。

http://jquery.malsup.com/form/