刷新单个DIV - e.p preventdefault ();

当用户在<div class="searchBar">中搜索项目时，我想将POST中的数据转到<div id="auto">，并且只刷新<div id="auto">，而不是重新加载整个页面。

我的问题是，当提交按钮被点击，整个页面正在加载。我需要能够刷新只有<div id="auto">时，提交按钮被点击。主要目的是，我想避免<div class="menuList">被重新加载每次提交点击。下面是我的代码。

 <div class="searchBar">
 <form action="" method="post">
    Furniture item: 
    <input type="text" name="val1" id="val1" value="<?=$_POST['val1']?>" />
    <input type="submit" id="submit" value="Submit" name="submit" />
    </form>
  </div>
  <div class="menuList">
    List of Furniture: 
    <select id='myList' name="mList" onchange='document.getElementById("val1").value = this.value;'><option value="">Furniture Available</option>
    </select>
    </div>
    <div id="result"></div>
    <script type="text/javascript">
    $(document).ready(function() {
        refresh();    
        });
    function refresh(){
        $("#submit").click(function(e) {
            e.preventDefault();
            $.ajax({
                url: 'php/filep.php',
                type: 'POST',
                data: $('#submit').val,
                success: function(data, status) {
                    $("#result").html(data)
                }
            });
            $(".result").fadeOut("slow");
            refresh();  
        });
    }
    </script>
 </body>

filep.php

if( isset($_POST['submit']) ){
    $resData = htmlentities('img/'.$_POST['val1']).'/'; 
}
if( isset($resData) ) {
$files = '*.*';
$fin = glob($resData.$files);
    $counts = count($fin);
    $imgs = array();
$div= '';
foreach ($imgs as $fin) {       
        $div .= '<div class="imgSlots">';
        $div .= '<li><div class="imgSlotsInner"><input type="image" src="'.$fin.'"/><testDes>"'.basename($fin.$files).'"</testDes></div></li>';
        $div .= '</div>';  
    }
echo $div;
}