Question

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

我尝试使用AJAX仅更新此DIV，但它会刷新整个网页吗？如何解决此问题，以便仅在按下“提交”按钮时刷新<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>

Answer 1

你需要做一些像下面这样的改变（我希望这是你需要的）

在html中使用id imgslots创建div，如下所示

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

在js中这样做

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

然后是数据

data: {'val1':val1},

并在php中

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

和循环

$list= '';
foreach ($imgs as $fin) {       

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

    }
echo $list;

Answer 2

你这样做的提交按钮有2个动作：

将提交操作作为类型提交按钮
您从jquery

您有两个选择

覆盖表单提交操作（同时删除onclick事件）

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

另一种解决方案是从按钮中删除type submit，并按原样保持点击事件。同样在data:的ajax请求中，您必须放置一个包含您要发送的数据的对象。

使用AJAX刷新单个DIV

2 个答案: