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>

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

Answer 1

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

$（ '＃自动'）的html（ ''）;

然后再次向您提供您在该Div中从Ajax发布中获取的内容。就像你要刷新网格或表格一样，只需编写内联HTML并填写来自ajaxpost的所有数据。您可以使用.each方法将其设置为循环

由于

单个DIV刷新 - e.preventDefault（）;

1 个答案: