我有一个业务功能可以在提交表单时进行员工搜索(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()
。