当前位置: 首页 > 工具软件 > php-ajax > 使用案例 >

ajax php jquery (1)

曾嘉荣
2023-12-01
 

<html>
<head>
<title>php+ajax+jquery打造的网站查询</title>
<script src="../jquery/jquery.js"></script>
</head>
<body>
<h1>搜索我们的电话目录</h1>
<form id="searchform" method="post">
<div>

<label for="search_term">搜索名称/电话</label>
<input type="text" name="search_term" id="search_term" />
<input type="submit" value="查找" id="search_button" />
</div>
</form>
<div id="search_results" style="display:none"></div>
</body>
</html>
<script>
$(function(){

//向上开始变小
$("#search_results").slideUp();

//点击查找的时候
$("#search_button").click(function(e){
 e.preventDefault;
 ajax_search();
});

// 输入搜索以后

$("#search_term").keyup(function(e){

if($(this).val() == '')
{
 alert('您没有输入任何东西');
 return false;
}else{

 ajax_search();
}
});
});


function ajax_search()
{
 var search_val = $('#search_term').val();
 $("#search_results").show();
 $.post('./find.php',{search_term: search_val},function(data){
 
  //
  //
  if(data.length >0)
  {
   $('#search_results').html(data);
  }
 
 });
}
</script>

 类似资料: