使用AJAX刷新单个DIV - Refreshing a single DIV using AJAX

Refreshing a single DIV using AJAX

本文关键字：DIV 单个刷新 AJAX 使用 | 更新日期: 2023-09-27

有一个div，使用外部php显示图像。HTML将项目名称(用户输入文本)作为POST传递给AJAX。

我试图更新只有这个DIV使用AJAX，但它刷新整个网页?我怎么能解决这个问题，所以只有<div class="imgSlots" id="auto">刷新时提交按钮按下?

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" id="imgSlots">';
        $div .= '<li><div class="imgSlotsInner"><input type="image" src="'.$fin.'"/><testDes>"'.basename($fin.$files).'"</testDes></div></li>';
        $div .= '</div>';  
    }
echo $div;
}

HTML

 <div class="searchBar">
 <form action="" method="post">
    Furniture item: 
    <input type="text" name="val1" id="val1" />
    <input type="button" value="Submit" id="btn" />
    </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>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#btn').click(function(e) {
            e.preventDefault();
            $.ajax({
                url: 'php/filep.php',
                type: 'POST',
                data: $('#submit').val(),
                success: function(data, status) {
                    $("#imgSlots").html('');
                    $("#imgSlots").html(data);
                }
            });
            $("imgSlots").fadeOut("slow");
        });
    });
    </script>

你需要做一些改变，像下面(我希望这是你需要的)

在HTML中创建id为imgslots的div

<div class="imgSlots" id="imgSlots">
</div>

在js中这样做

var val1 = $('#val1').val();

then in data

data: {'val1':val1},

和php中的

if( isset($_POST['val1']) ){
    $resData = htmlentities('img/'.$_POST['val1']).'/';
}

和in循环

$list= '';
foreach ($imgs as $fin) {       
        $list.= '<li><div class="imgSlotsInner"><input type="image" src="'.$fin.'"/><testDes>"'.basename($fin.$files).'"</testDes></div></li>';
    }
echo $list;

提交按钮有两个动作:

将提交动作作为类型提交按钮
你从jquery中设置的onclick动作

你有两个选择

重写表单提交操作(同时删除onclick事件)

var form = $('<My form selector>');
form.submit(function () {    
$.ajax({
type: post,
url: "your url",
data: form.serialize(),
success: function(jsonObj){
        }
      });
});

另一个解决方案是删除按钮的type submit，并保持你的onclick事件。

data: