我对 ajax 请求及其如何处理输入类型图像有疑问。 我有一个全部显示在某个图像列表，我需要用户点击 他或她想要的图像，当发生这种情况时，它会添加到他们自己的自定义列表中。名单 显示在屏幕底部，这意味着他们选择的所有图像都会出现 在屏幕底部的自己的框中。所以这个概念是我有一个表格，输入 “图像”的类型。这是标记:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>userList</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
//choose div containg all the images:
<div id="choose"><div id="inside">PICK AN IMAGE:<hr>
//the images will be loaded here in this form
<form type="" method="post" action="">
<input type="image" id="send" name="send" value="images/Woman-02-june.png" src="images/Woman-02-june.png"/>
<input type="image" id="send" name="send" value="images/Man-01-June.png" src="images/Man-01-June.png"/>
</form>
</div></div>
//list div that would display the images the user has chosen
<div id="list"><?php
if(file_exists("list.html") && filesize("list.html") > 0){
$handle = fopen("list.html", "r");
$contents = fread($handle, filesize("list.html"));
fclose($handle);
echo $contents;
}
?></div>
</body>
</html>
所以当用户点击一张图片时，它应该被发送到一个脚本，该脚本写入发送的数据 到一个文件中。然后文件被加载并显示在“列表”中。这是脚本:
<?php
//get data from array
$pikc=$_POST['send'];
//open file to append
$fp=fopen("list.html", 'a');
//write data to file
fwrite($fp, "<div class='msgln'>"."<img src=\"".$pikc."\">"."<br>"."</div>");
//close the file
fclose($fp);
?>
如您所见，发送的数据是单击图像的“值”，以便拍摄并执行连接 将其包含在图像的标记中。我知道我需要使用 ajax 来执行此操作，所以这是它的 ajax:
<script type="text/javascript" src="jquery-1.8.0.min (1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
//If user submits the form
$("#send").click(function(){
var clientmsg = $("#send").val();
$.post("post.php", {send: clientmsg});
return false;
});
});
</script>
然后我包含另一个功能，该功能可以自动滚动和持续显示“列表”我对此没有问题，它工作正常所以我不会发布它。问题是，每当我点击第一张图片时，一切似乎都很好，数据被发送到脚本而没有任何重新加载，但每当我点击第二张图片时，我的浏览器都会将我带到脚本页面，虽然该文件随内容更新。我该如何解决这个问题，以停止任何重新加载或重定向？请注意，这只是一个“模拟测试”， 真实的东西将从 mysql 数据库加载数据，这就是为什么我对两个图像使用相同的 id。 它看起来像这样:
//after establishing mysql connection, loading data from database, etc
echo "<form method="post" action="">
//fetch array that is holding the loaded data
while ($row=mysql_fetch_array)
{
$row['img_path']=$image;
//echo the data within the form
echo "<input id="send" type="image" value=\"".$image."\">"."<img src=\"".$image."\">";
}
echo "</form>"
因此数据库中的所有图像路径都被选中，并使用它们显示相应的图像，其中有 300 多个。 然后，我需要通过 ajax 将表单发送到脚本，并且应该发生与我的示例中相同的事情。如果问题出在 id 上，我无法手动为三百张图像编写 id!，我也不不要以为给表单一个 id 然后在 ajax 进程中使用它就可以了，我担心不会发送任何图像，或者会发送所有图像，除非我错了)。 那么，我该如何解决这个问题？提前谢谢你，我对编程很陌生，所以我恳请帮助。 (请注意每个用户，在真实版本中 将有自己的“列表”文件和帐户)。谢谢，任何事情都会受到赞赏，即使是完成同一件事的不同方法。
最佳答案
几件事:
从表面上看，您似乎有点 divitis :2 <div>在 <form> 附近可能没有必要(特别是因为它们只包含一个元素——表单)。
您注意到您知道您重复使用了 ID send ，并且它会在实际实现中发生变化；但是从您发布的 php 来看，它看起来像多个 input与id相同仍然会被回显:这可能会给您的 javascript 带来很多问题(它可能什么都不做，或者可能产生意想不到的结果)。如果不使用 id 会怎么样你用过class="send" ？
<form id="choose" method="post">
<input type="image" class="send" name="send[]" value="Woman-02-june.png" src="images/Woman-02-june.png" />
<input type="image" class="send" name="send[]" value="Man-01-June.png" src="images/Man-01-June.png" />
</form>
然后当你需要在 jQuery 中引用它们时，你可以使用 $('#choose').find('.send') .此外，如果您希望表单元素的数据成为组的一部分，您可以使用 name="send[]"创建数组:$_POST["send"]将是一个数值数组(或者，您可以将其设为关联数组，如下所示:name="send[FOO]" —请注意，FOO 不应不用引号引起来)。
但是，在这种情况下将输入分组是多余的，因为一次只会提交一个输入的值。如果您更改表单以允许用户在提交表单之前选择多个图像(使用不可见的复选框，当用户取消/单击图像时通过 jquery 取消/选中这些复选框)，这将是适用的。如果您允许在提交前进行多项选择，那么您的 AJAX 将看起来像这样:
$(function(){//short-hand for $(document).ready()
$('#choose').submit(function(event){
var form_data = $(this).serialize();
$.post("post.php", {data:form_data}, function(){
//stuff to do upon successful AJAX call
var items;
for ( var bio_img in form_data.send )
{ items += '<li>'+bio_img+'</li>'; }
//replace contents of <div id="list">
//with the values of the input elements
$('#list').html('<ul>'+items+'</ul>');
});//$.post()
event.preventDefault(); return false;//I double up just to be sure
});//form submit
});//document.ready
否则:
$(function(){//short-hand for $(document).ready()
$('#choose').submit(function(event){
var form_data = $(this).serialize();//has data from only 1 input
$.post("post.php", {data:form_data}, function(){
//stuff to do upon successful AJAX call
//assuming 'send' was not made an array in the input's name:
//eg name="send" and not name="send[]"
$('#list').find('ul').append('<li>'+form_data.send+'</li>');
});//$.post()
event.preventDefault(); return false;//I double up just to be sure
});//form submit
});//document.ready
最后，看起来您正在使用不安全的基本 php mysql 函数(请参阅 PHP 文档中关于 mysql-fetch-array 的警告消息)。你可以考虑 PHP Data Objects (PDO)
编辑:从您的问题编辑来看，您似乎担心通过 AJAX 发送图像文件。但是，您的代码中没有文件上传输入；用户所做的只是选择一个选项，而您已经拥有该文件(因为您通过 <input type="image" … src="…" 引用了它)。您只是发送用户的选择，而不是图像文件本身。
关于php - 如何使用ajax发送带有输入类型图像的表单以防止重定向/重新加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12662884/