3

我对 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进程中使用它就可以了，我担心不会发送任何图像，或者会发送所有图像，除非我错了）。那么，我该如何解决这个问题？提前谢谢你，我对编程很陌生，所以我请求帮助。（请注意，每个用户，在真实版本中都有自己的“列表”文件和帐户）。谢谢，任何事情都会受到赞赏，甚至是完成同一件事的不同方法。

4

1 回答 1

1

几件事：

从表面上看，您似乎有点divitis：<div>周围的2<form>可能不是必需的（特别是因为它们只包含一个元素 - 形式）。

您注意到您知道您重新使用了 id send，并且它会在实际实现中发生变化；但是，从您发布的 php 来看，看起来多个input相同的 sid仍然会被回显：这可能会导致您的 javascript 出现许多问题（它可能不会做任何事情，或者可能会产生意想不到的结果）。如果不使用idyou usedclass="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 函数，这些函数不安全（请参阅mysql-fetch-array的 PHP 文档中的警告消息）。您可能会考虑PHP 数据对象 (PDO)

编辑：从您的问题编辑来看，您似乎担心通过 AJAX 发送图像文件。但是，您的代码中没有文件上传输入；用户所做的只是选择一个选项，并且您已经拥有该文件（因为您通过 引用它<input type="image" … src="…"）。您只是发送用户的选择，而不是图像文件本身。

于 2012-09-30T22:07:06.277 回答