javascript - 刷新单个 DIV - e.preventDefault();

Question

当用户搜索 <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>

文件p.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;
}

Answer 1

是的，您只能刷新单个 div。您到底需要做的是刷新该 div 的 html，即首先删除该 div 的 html，如

$('#auto').html('');

然后再次将您从该 Div 中的 Ajax 发布中获取的内容放入其中。就像如果您要刷新网格或表格，只需编写内联 HTML 并填充来自 ajaxpost 的所有数据。您可以使用 .each 方法使其循环

谢谢