Php 使用AJAX刷新单个DIV

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

POST

传递给AJAX

我试图使用AJAX只更新这个DIV，但它会刷新整个网页？如何解决此问题，以便在按下提交按钮时仅刷新

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

if（isset（$\u POST['submit']））{
$resData=htmlentities（'img/'。$_POST['val1']）。/；
}
如果（isset（$resData））{
$files='*.'；
$fin=glob（$resData.$files）；
$counts=计数（$fin）；
$imgs=array（）；
$div=''；
foreach（$imgs作为$fin）{
$div.=''；
$div.=“
”.basename（$fin.$files）。“
”；
$div.=''；
}
echo$div；
}

HTML

家具项目：
家具清单：
可用家具
$（文档）.ready（函数（）{
$（'#btn'）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
url:'php/filep.php'，
键入：“POST”，
数据：$（“#提交”）.val（），
成功：功能（数据、状态）{
$（“#imgSlots”）.html（“”）；
$（“#imgSlots”）.html（数据）；
}
});
$（“imgSlots”）。淡出（“慢”）；
});
});

您需要做如下更改（我希望这就是您需要的）

在html中创建id为imgslots的div，如下所示

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

然后是数据

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;

$list=''；
foreach（$imgs作为$fin）{
$list.='
“'.basename（$fin.$files）。“
”；
}
echo$列表；

您的提交按钮有两个操作：

提交操作作为类型提交按钮

从jquery设置的onclick操作

你有两个选择

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

  var form=$（''）；
  提交（函数（）{
  $.ajax({
  类型:post,，
  url:“您的url”，
  数据：form.serialize（），
  成功：函数（jsonObj）{
  }
  });
  });
  

• 另一种解决方案是从按钮中删除

  类型submit

  ，并保持onclick事件的原样。同样在ajax请求中，在

  数据：

  中，您必须放置一个包含要发送的数据的对象

---

如果有任何错误，您是否检查了javascript控制台？您将imgslots作为一个类而不是一个idy进行编码您没有元素

#submit

，并且您最后的

imgslots

没有

#

（尽管所有内容都应该是

）。检查js控制台，因为您可能有一个导致表单提交的错误。另外，用

div

包装

li

会产生无效的html，您会得到多个同样无效的imgSlots ID，imgSlots元素在哪里？您的响应本身中有imgSlots元素。那么，它如何将html（响应）附加到该元素呢。。。我想你是对的。我怎样才能解决这个问题？我尝试从PHP中删除

id=imgSlots

，并将其添加到HTML页面的新DIV中。但似乎不起作用。

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;

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