php - HTML 表单 POST 到 AJAX，然后 POST 到 PHP 页面

Question

我有一个带有搜索功能的 PHP 页面，我使用 AJAX 进行分页。当我提交搜索输入时，AJAX 应该获取输入并将其传递给 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);
        }        
    });
});

PHP查询并打印结果：

<?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 ...

Answer 1

HTML：

<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>

Javascript：

$(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);
            }
        });
    }
});

PHP：

echo $_POST['keywords'];