Question

我最近创建了一个网站，允许用户上传图片，然后让该用户和网站的其他用户对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" />

JQUERY

$(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重新加载图像。有什么想法吗？

Answer 1

是的，你可以使用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
  }
});

Answer 2

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

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

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

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

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

Answer 3

我自己编写类似的东西，你可以试试这样的东西：

newimage.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);
?>

这是一个让你入门的小例子。有问题请问。可以找到更多信息here＆amp; here

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

仅更新页面的一部分

3 个答案: