2015-03-17 5 views
1

У меня есть бизнес-функция для поиска сотрудников (Ajax) при отправке формы. Мне нужно загрузить данные о сотрудниках, используя JQuery на основе Ajax. Ниже приведен мой поисковый код. Проблема заключается в том, что после отправки формы <div id="emp"></div> не заполняется значениями. в Employee.php странице Я вижу объект json, смог напечатать сотрудников.php + Ajax + Json page submit

Я думаю, ниже форма отправляет, но не возвращается на страницу после создания объекта json. Может ли кто-нибудь помочь мне, как я могу сделать это как вызов на основе ajax.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js"></script> 
<script type="text/javascript"> 

    $(document).ready(function() 
    { 
     //alert('test'); 
     $(".js-ajax-php-json").submit(function(){ 
      alert('test'); 
      $.getJSON("Employee.php", function (jsoncontent) 
      { 
       alert(jsoncontent); 
       jsonArray = jsoncontent; 

       for(var i =0;i < jsonArray.length-1;i++) 
{ 
    var emp = jsonArray[i]; 
    $("#emp").html(i+" "+emp[0].lastname + " - " + emp[0].firstname+ " - "); 
} 
    }); 
    }); 
    }); 
</script> 
</head> 
<body> 
<form class="js-ajax-php-json" action="Employee.php" method="GET"> 
     <div class="input-group"> 
      <input type="text" class="form-control" style='width:300px' name="srch-term" id="srch-term" placeholder="Enter the Employee Name"> 
      <span class="input-group-btn"><input type="submit" value="search" class="btn btn-success"></input></span> 
      </div> 
     </form> 
<div id="emp"></div> 

</body> 
</html> 

ответ

0
<script type="text/javascript"> 

    $(document).ready(function() 
    { 
     //alert('test'); 
     $(".js-ajax-php-json").submit(function(e){ 
      e.preventDefault(); //prevent the form from submitting. 

      $.getJSON("Employee.php", function (jsoncontent) 
      { 
       alert(jsoncontent); 
       jsonArray = jsoncontent; 

       for(var i =0;i < jsonArray.length-1;i++) 
{ 
    var emp = jsonArray[i]; 
    $("#emp").html(i+" "+emp[0].lastname + " - " + emp[0].firstname+ " - "); 
} 
    }); 
    }); 
    }); 
</script> 

вы пропустили preventDefault(), чтобы предотвратить форму от представления.

+0

Благодарим за ответ! – suma

+0

Спасибо за ответ! Я попытался использовать preventDefault(), страница не отправляется, в этом случае мой employee.php не будет вызван, и объект JSon не будет создан. Согласно моему требованию, результаты поиска должны отображаться на одной странице (search.php) без перенаправления на другую страницу (employee.php). Например, в walmart.com при поиске продукта результат поиска будет отображаться на одной странице без перенаправления/перегрузки на другую страницу. – suma