1

我最近创建了一个网站，允许用户上传图片，然后让该用户和网站的其他用户从 1 到 10 对图片进行评分。一切正常。当用户对图像进行评分时，将保存该图像，然后生成另一个随机框并将其呈现给用户。这通过将新的框 id（随机生成）添加到查询字符串来工作。这允许用户导航回他们刚刚看到的图像。

我的问题来自更新页面。目前，我的代码处理评分并将其保存在数据库中，然后将用户重定向到同一页面，我有一些代码可以从数据库中找到随机图像 id，然后使用该 id 将它们再次重定向到具有 id 的同一页面查询字符串。这很好用，但是我想让它只更新图像和图像信息（图像名称评级等），而 HTML 的其余部分（页眉、导航、侧边栏、页脚等......）不是。

据我了解，您可以使用 JQuery/Javascrip/AJAX 上传网站的一部分吗？但是，这将不允许用户重定向回之前查看的图像？

如果您想了解更多信息，请询问。

编辑

我已经获取了一些信息，并更改了我的代码以使用哈希值，我的代码如下：

HTML

<img id="design" alt="" width="300" height="300"  />
<input type="button" id="GetImage" value="Get Image" />

查询

$(document).ready(function(){

    $("#GetImage").click(function() {

        $.ajax({ //Make the Ajax Request
                 type: "POST",
                 url: "testimagelook.php", //file name
                 success: function(server_response){
                    var id = server_response;
                    document.location.hash = id;
                    $('#design').attr('src','img/boxes/'+id+'.png');
                 }
        });
    });

});

php 文件 testimagelook.php 连接到数据库并带回我的一张图像的随机 id。此代码可以很好地显示图像并将图像的 id 保存在 URL 的哈希中，从而允许我保留图像的用户历史记录。但是，当用户单击后退按钮时，我不确定如何检索先前的哈希值并使用正确的 id 重新加载图像。有任何想法吗？

4

3 回答 3

3

是的，您可以使用 jQuery AJAX 方法来实现这一点
为简单起见，请使用此 

$.post('pageURL.php', {data1: value1}, function(result) {
  // Update the portion of the page you wish to

});

更新 

$.ajax({
  type: "POST",
  url: "PageName.aspx/MethodName",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {
    // Now receive the data (information) in the form of JSON
    // In this JSON you can pass the imageID or anything to proceed your logic
    // and update the portion of the page you wish to
  }
});
于 2013-02-12T12:07:32.503 回答
1

有几种方法可以做你喜欢的事情。

较新的（支持 html5 的）浏览器向客户端公开了一个 History 对象，该对象可用于添加和删除历史记录（后退按钮）位置。

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

但这仍然是新的，你不能强迫你的用户使用更新的浏览器。

“始终”有效的一种方法是将#yourId锚点添加到对象的 href 成员中，document.location以识别您的图像。然后，这将自动保存在浏览器历史记录中。然后，要使用此信息，您必须确保捕捉到document.location对象中的更改，并通过 Ajax 请求使用适当的数据更新您的图像视图。

于 2013-02-12T12:08:53.483 回答
0

我自己也在编写类似的代码，你可以尝试这样的事情：

新图像.js：

function newImage(id,rate) {
    $('.wrapper').empty();
    $.ajax({
        url:'dbfunction.php',
        type:'POST',
        data: { 'imageid': i, 'rating':rate }
    }).success(function(){
        // Using jquery append new information inside wrapper      
    });
}

dbfunction.php：

<?php
    mysql_query("UPDATE table SET rating='".$_POST['rating']."' WHERE id='".$_POST['id']."'");

    // Get new id from db
    echo json_encode($new_id);
?>

这是一个非常小的示例，可以帮助您入门。任何问题都可以问。更多信息可以在这里和这里找到。

为了澄清一点，我在我的网页上使用了类似的代码。您无需每次更新页面即可访问所有信息。所有页面历史记录都保存在全局数组中。请记住，该网页正在制作中，并非全部功能！

于 2013-02-12T12:21:14.043 回答