我开发了一个单页面应用程序,它显示了数据库表中的所有条目。结果是分页的,并且在不刷新整个页面的情况下呈现。我的代码的html部分是:
<p>Search by Last Name:</p>
<div class="form-group">
<div class="input-group">
<form method="post">
<input type="text" name="search" id="search" placeholder="Search by Last Name" class="form-control" />
<input type="submit" id="submitbtn"/>
</form>
</div>
</div>
<div class="table-responsive" id="pagination_data">
</div>
jQuery代码如下:
<script>
$(document).ready(function(){
load_data();
function load_data(page,search)
{
$.ajax({
url:"pagination.php",
method:"POST",
data:{page:page, search:search},
success:function(data){
$('#pagination_data').html(data);
}
});
}
$(document).on('click', '.pagination_link', function(){
var page = $(this).attr("id");
load_data(page);
});
$(document).on('click', '#submitbtn', function(){
var page = $(this).attr("id");
var search = $('#search').val();
load_data(page,search);
});
});
</script>
我希望能够在不更改到其他页面的情况下搜索结果。目前,分页工作正常。我只是想找到一种方法将#search的值发送到服务器端并在查询中使用它。我上面用来发送#search值的方式不起作用。
答案 0 :(得分:0)
您的提交按钮是表单输入,我不相信click
事件正在触发。如果你改变:
$(document).on('click', '#submitbtn', function(){
到
$(document).on('submit', '#submitbtn', function(e){
你应该看到函数fire。请注意,我将参数e
添加到匿名函数中。这将允许您在函数内执行e.preventDefault();
,这将停止默认表单提交。通常,这会将浏览器重定向到提交的action
属性