php + Ajax + Json 页面提交


php + Ajax + Json page submit

我有一个业务功能可以在提交表单时进行员工搜索(Ajax)。我必须使用基于JQuery的Ajax加载员工详细信息。以下是我的搜索代码。问题是在提交表单后,<div id="emp"></div>没有填充值。在Employee.php页面中,我看到了json对象,能够打印员工。

我想下面的表单正在提交,但在创建 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>
<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()