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

Question

I have a PHP page with a search function and I use AJAX for pagination. When I submit my search input, AJAX should grab the input and pass it to the PHP page which will further query the database. The last bit does not work and I have been struglling to understand why. Could anyone help please. The code I have is below:

PHP/HTML page with form:

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

Javascript with AJAX:

$(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 to query and print the results:

<?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'];