2016-05-03 130 views
0

我想創建一個jsp與從Servlet的JSON數組表。我的問題是我需要按兩次按鈕才能得到輸出。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<html> 
<head> 
    <title>Search a User</title> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#search1').click(function() 
      { 
       var searchdata = $("#searchword").val(); 
       $.ajax({ 
        type: "GET", 
        url: "Search", //this is my servlet 
        data: {searchword :searchdata }, 
        success: function(data){ 
         var out = "<table>"; 

         for(i = 0; i < data.length; i++) { 
          out += "<tr><td>" + data[i].fname + "</td><td>" +data[i].lname +"</td><td>" + data[i].dob + "</td><td>" + data[i].country +"</td><td>" + data[i].email + "</td><td>" +data[i].mnumber +"</td></tr>"; 
         } 
         out += "</table>"; 
         document.getElementById("id01").innerHTML = out; 
        } 
       }); 
      }); 

     }); 
    </script> 
</head> 
<body> 
<form method="post" class="form-horizontal"> 
    <fieldset> 


     <div class="form-group"> 
      <label class="col-md-4 control-label" for="searchword">Search a User</label> 
      <div class="col-md-5"> 
       <input id="searchword" type="text" placeholder="Add User's name" class="form-control input-md" required=""> 

      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-md-4 control-label" for=""></label> 
      <div class="col-md-3"> 
       <button id="search1" class="btn btn-block btn-success">Search</button> 
      </div> 
     </div> 

    </fieldset> 
</form> 
<div id="id01"></div> 
</body> 
</html> 

要創建預期的輸出,我需要在搜索按鈕點擊兩次。 JSON數組正確檢索但Jquery函數不響應點擊。

+0

將腳本放在表單元素之後.... – nisar

+1

嘗試''click'handler'內的'console.debug('')來驗證執行情況,或者您也可以驗證瀏覽器控制檯的「Network」選項卡以調查URL下的URL單擊按鈕之前的'XHR'選項卡。 – Arvind

+0

@nisar它沒有工作 –

回答

1

似乎在第一次點擊後運行,所以也許你的頁面上某處存在衝突的代碼?

https://jsfiddle.net/716tnfk3/

$('#search1').click(function() { } 

或者,你在移動設備上測試?

0

正如yezzz提到的,我的代碼中存在代碼衝突。我刪除了所有的cdn,並從w3schools用途添加cdn。現在它工作正常。發生這種情況是因爲我將幾個教程提到的代碼添加在一起。