HTML表单发布到AJAX，然后发布到PHP页面

我有一个带有搜索功能的PHP页面，我使用AJAX进行分页。当我提交搜索输入时，AJAX应该获取输入并将其传递到PHP页面，PHP页面将进一步查询数据库。最后一点不起作用，我一直在努力理解为什么。谁能帮忙吗。我的代码如下：

PHP/HTML页面及表单：

<form action="" id="postData" method="post">
<p><b> Search all videos in database below: </b></p>
<ul><center> &nbsp Keywords: </center>
    <input type="text" id="input" name="input" size="50" maxlength="64">
</ul>
<ul>
    <center><input type="submit" name = "submit" value ="Search"></center>
</ul>
</form>

在以下数据库中搜索所有视频：

关键词：

使用AJAX的Javascript：

$(document).ready(function(){
    function loading_show(){
        $('#loading').html("<img src='../images/loading.gif'/>").fadeIn('fast');
    }
    function loading_hide(){
        $('#loading').fadeOut('fast');
    }                
    function loadData(page){
        loading_show();                    
        $.ajax
        ({
            type: "POST",
            url: "search_videos.php",
            data: { 'page': page, 'input': $('#postData').serialize()},
            success: function(msg)
            {
                $("#container").ajaxComplete(function(event, request, settings)
                {
                    loading_hide();
                    $("#container").html(msg);
                });
            }
        });
    }
    loadData(1);  // For first time page load default results
    $('#container .pagination li.active').live('click',function(){
        var page = $(this).attr('p');
        loadData(page);
    });           
    $('#go_btn').live('click',function(){
        var page = parseInt($('.goto').val());
        var no_of_pages = parseInt($('.total').attr('a'));
        if(page != 0 && page <= no_of_pages){
            loadData(page);
        }        
    });
});

$（文档）.ready（函数（）{
函数加载_show（）{
$（'#load'）.html（“”.fadeIn（'fast'）；
}
函数加载_hide（）{
$（'加载'）.fadeOut（'快速'）；
}                
函数加载数据（第页）{
加载_show（）；
$.ajax
({
类型：“POST”，
url:“search_videos.php”，
数据：{'page'：页面，'input'：$（'#postData'）。序列化（），
成功：功能（msg）
{
$（“#容器”）.ajaxComplete（函数（事件、请求、设置）
{
加载_hide（）；
$（“#container”）.html（msg）；
});
}
});
}
loadData（1）；//第一次页面加载默认结果
$（'#container.pagination li.active'）.live（'click'，function（）{
var page=$（this.attr（'p'）；
装载数据（第页）；
});           
$（'gobtn'）.live（'click'，function（）{
var page=parseInt（$（'.goto'）.val（））；
var no_of_pages=parseInt（$（'.total'）.attr（'a'）；
如果（page！=0&&pageHTML:

PHP:

您现在使用的是什么版本的jQuery？删除表单标记中的
？
，在第一个ul中添加一个结束
，并在
加载数据下修复Javascript代码中的ID。完成后，试着想想您是否真的需要HTML中的表单，因为它从来都没有提交过。一切都会发生在Java中所以不需要表单，只需在单击按钮时定义一个事件即可字符是我忘记删除的东西，我无法正确格式化此处显示的代码，这就是我添加字符的原因。抱歉。好的#Sh3ljohn，谢谢你的建议。如果我想在这种情况下传递输入，我的javascript会是什么样子？我仍然需要变量“page”#Sh3ljohn因为这告诉我，我每页只需要5个视频。我已经更新了代码，以前没有出现过，不知道为什么。@B.B10如果您需要随表单发送另一个变量，那么我假设它来自某个用户输入。如果是这样，只需添加一个列表项（
）到无序列表，使用相应的标签和ID，然后像我处理
keywords
一样获取其值，将其放入Ajax请求的数据属性中。：）因此，数据属性看起来像：数据：{'page'：page，'keywords'：$（'.#keywords'）.val（）}？#sh3ljohnthank非常感谢@Sh3ljohn的帮助
<?php
 if($_POST['page'])
 {
 $page = $_POST['page'];
 $cur_page = $page;
 $page -= 1;
 $per_page = 5;
 $previous_btn = true;
 $next_btn = true;
 $start = $page * $per_page;

include"core/database/connect.php";

// Get the input of the selected video
$input = $_POST['input'];
//$input = 'video';
echo $input; // CANNOT get input variable from the initial form!

... The mysql query and rest of the code continued ...

<div>
<p><b> Search all videos in database below: </b></p>
<ul>
    <li>
        <label for="keywords">Keywords</label>
        <input type="text" id="keywords" name="keywords" size="50" maxlength="64" />
    </li>
    <li>
        <button onClick="loadData()">Search</button>
    </li>
</ul>
</div>
<div id="container">
</div>

$(document).ready(function(){
    // ...              
    function loadData()
    {
        loading_show();
        $.ajax
        ({
            type: "POST",
            url: "http://yourwebsite.com/search_videos.php",
            data: { 'keywords': $('#keywords').val() },
            success: function(msg)
            {
                loading_hide();
                $("#container").html(msg);
            }
        });
    }
});

echo $_POST['keywords'];