ajax分页不起作用？

Question

代码：

<script>
    $(document).ready(function() {
        $("#submit").click(function() {
            var field = $("#field").val();
            $("#imagen").show();
            $.ajax({
                type: "POST",
                data: {
                    "field": field
                },
                url: "exams.php",
                success: function(data) {
                    $("#imagen").hide();
                    $("#popular_colleges").html(data);
                }
            });
        });
    });
</script>

<img id="imagen" src="images/please.gif">
<div id="popular_colleges"></div>

exams.php

    <?php 
      if(isset($_POST) && isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
  include("conn.php"); 
  if(isset($_POST["page"]))
    {
    $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
    if(!is_numeric($page_number)){die('Invalid page number!');}
  }
    else
    {
    $page_number = 1; 
  }

    $field = $_POST['field'];
  $results = $mysqli->query("SELECT COUNT(*) FROM all_colleges Where field = '$field'");
  $get_total_rows = $results->fetch_row(); 
  $total_pages = ceil($get_total_rows[0]/$item_per_page);
  $page_position = (($page_number-1) * $item_per_page);
  $results = $mysqli->prepare("SELECT college_name,city FROM all_colleges Where field = '$field' ORDER BY priority desc LIMIT $page_position, $item_per_page");
  $results->execute();
  $results->bind_result($college_name, $city);
  echo '<ul class="contents">';
  while($results->fetch())
    { 
    echo '<li>';
  ?>
            <?php echo $college_name; ?>
            <?php echo $city; ?>

    <?php
    echo '</li>';
  }
  echo '</ul>';
  echo '<div align="center">';
  echo paginate_function($item_per_page, $page_number, $get_total_rows[0], $total_pages);
  echo '</div>';

  exit;
}
function paginate_function($item_per_page, $current_page, $total_records, $total_pages)
{
    $pagination = '';
    if($total_pages > 0 && $total_pages != 1 && $current_page <= $total_pages){ 
        $pagination .= '<ul class="pagination">';

        $right_links    = $current_page + 3; 
        $previous       = $current_page - 3; 
        $next           = $current_page + 1; 
        $first_link     = true; 

        if($current_page > 1){
      $previous_link = ($previous==0)? 1: $previous;
            $pagination .= '<li class="first"><a href="#" data-page="1" title="First">&laquo;</a></li>'; 
            $pagination .= '<li><a href="#" data-page="'.$previous_link.'" title="Previous">&lt;</a></li>'; 
                for($i = ($current_page-2); $i < $current_page; $i++){ 
                    if($i > 0){
                        $pagination .= '<li><a href="#" data-page="'.$i.'" title="Page'.$i.'">'.$i.'</a></li>';
                    }
                }   
            $first_link = false; 
        }

        if($first_link){ 
            $pagination .= '<li class="first active">'.$current_page.'</li>';
        }elseif($current_page == $total_pages){ 
            $pagination .= '<li class="last active">'.$current_page.'</li>';
        }else{ 
            $pagination .= '<li class="active">'.$current_page.'</li>';
        }

        for($i = $current_page+1; $i < $right_links ; $i++){ 
            if($i<=$total_pages){
                $pagination .= '<li><a href="#" data-page="'.$i.'" title="Page '.$i.'">'.$i.'</a></li>';
            }
        }
        if($current_page < $total_pages){ 
        $next_link = ($i > $total_pages) ? $total_pages : $i;
                $pagination .= '<li><a href="#" data-page="'.$next_link.'" title="Next">&gt;</a></li>'; 
                $pagination .= '<li class="last"><a href="#" data-page="'.$total_pages.'" title="Last">&raquo;</a></li>';
        }

        $pagination .= '</ul>'; 
    }
    return $pagination; 
}
?>

我想使用ajax分页，因为我不想再次重新加载页面，但是当我点击“提交”按钮时，它对我起作用并且什么都不显示。那么，我该如何解决这个问题？请帮助。

谢谢