点击按钮即可从PHP文件中获取数据

加载页面时，我有两个单独的div，它们从数据库中随机获取图像，然后将它们作为背景图像进行回显。我还得到了图像附带的其他数据

我需要从一个新的PHP文件中获取数据，并在单击按钮时更改div的背景图像（这样您就不需要刷新页面）

在getnew.php中：

$select = mysqli_select_db($conn, "database"); 

$result = mysqli_query($conn,"SELECT * FROM photos ORDER BY rand() LIMIT 1");
$row = $result->fetch_assoc();
$img1link = $row['link'];
$rating1 = $row['rating'];
$s1 = $row['sigma'];

$result2 = mysqli_query($conn,"SELECT * FROM photos ORDER BY rand() LIMIT 1");
$row2 = $result2->fetch_assoc();
$img2link = $row2['link'];
$rating2 = $row2['rating'];
$s2 = $row2['sigma'];

$select = mysqli_select_db($conn, "database"); 
$result = mysqli_query($conn,"SELECT * FROM photos ORDER BY rand() LIMIT 2");
$row = $result->fetch_assoc();
$img1link = $row['link'];
$rating1 = $row['rating'];
$s1 = $row['sigma'];
$row2 = $result2->fetch_assoc();
$img2link = $row2['link'];
$rating2 = $row2['rating'];
$s2 = $row2['sigma'];
echo json_encode(array('img1'=>$img1link,'img2'=>$img2link));

在main.php中：

$("#button").on("click",function(){
    //
})

$("#button").on("click",function(){
    $.getJSON("getnew.php",function(data){
    //use data.img2 and data.img1 and set the background
    // for example: $('#someDiv').css('background-image',"url('"+data.img1+"')");
   });
})

据我所知，您使用jQuery的$.get从getnew.php获取数据，但如何才能在不刷新页面的情况下使用数据更改背景图像

---

例如：

style=“background image:url（“”）”>

使用JQuery CSS代码。当您能够从页面获取数据时，请在JQuery.CSS代码中传递图像路径，它将根据您的需要执行

试着分析代码

将其放置在函数单击时将调用的finction中： 成功后，您可以使用类似css的代码： 这只是ajax/jquery中的一个示例

 $.ajax("signin.php", {
                            data: {
                                login:  login,
                                pass:   pass
                            },
                            success: function(data)
                            {
                                //alert(data);
                                if (data==1)
                                {
                                    s$("#login").animate({   opacity: 1,top: '49%' }, 200,function(){
         $('.userbox').show().animate({ opacity: 1 }, 500);
            $("#login").animate({   opacity: 0,top: '60%' }, 500,function(){
                $(this).fadeOut(200,function(){
                  $(".text_success").slideDown();
                  $("#successLogin").animate({opacity: 1,height: "200px"},500);                  
                });                           
             }) 
     }) 

                                }
                                else
                                {
                                    alert(data);
                                    setTimeout( "unloading()", 1000 );
                                    showError('OOPS..please check the credentials..');
                                }
                            },
                            error: function()
                            {
                                //alert(data);
                                showError('OOPS..Error in Connection..');
                            },
                            type: "POST"
                      });

---

您需要使用ajax，从服务器发送数据，并在客户端解析数据

下面是基于您的代码片段的代码示例

在getnew.php中：

$select = mysqli_select_db($conn, "database"); 

$result = mysqli_query($conn,"SELECT * FROM photos ORDER BY rand() LIMIT 1");
$row = $result->fetch_assoc();
$img1link = $row['link'];
$rating1 = $row['rating'];
$s1 = $row['sigma'];

$result2 = mysqli_query($conn,"SELECT * FROM photos ORDER BY rand() LIMIT 1");
$row2 = $result2->fetch_assoc();
$img2link = $row2['link'];
$rating2 = $row2['rating'];
$s2 = $row2['sigma'];

$select = mysqli_select_db($conn, "database"); 
$result = mysqli_query($conn,"SELECT * FROM photos ORDER BY rand() LIMIT 2");
$row = $result->fetch_assoc();
$img1link = $row['link'];
$rating1 = $row['rating'];
$s1 = $row['sigma'];
$row2 = $result2->fetch_assoc();
$img2link = $row2['link'];
$rating2 = $row2['rating'];
$s2 = $row2['sigma'];
echo json_encode(array('img1'=>$img1link,'img2'=>$img2link));

在main.php中：

$("#button").on("click",function(){
    //
})

$("#button").on("click",function(){
    $.getJSON("getnew.php",function(data){
    //use data.img2 and data.img1 and set the background
    // for example: $('#someDiv').css('background-image',"url('"+data.img1+"')");
   });
})

---

只是一个简单的脚本，但希望它能帮助：

在getnew.php中

$select = mysqli_select_db($conn, "database"); 
function get_random_image(){
    $result = mysqli_query($conn,"SELECT * FROM photos ORDER BY rand() LIMIT 1");
    $row = $result->fetch_assoc();
    $result=[
        'link' => $row['link'],
        'rating' => $row['rating'],
        'sigma' => $row['sigma'] 
        ];
    return $result;
}

if($_POST['request']=='get_random_image'){
    $r = array();
    array_push($r, get_random_image());
    array_push($r, get_random_image());

    echo json_encode($r);
}

在javascript文件中：

$("#button").on("click",function(){
    show_image();
})

function show_image(){
    var response = get_data("get_random_image");

    response = jQuery.parseJSON(response);
    $.each( response, function( key, value ) {
        // do something with the data like this:
        $('.image').append('<img src="'+value.link+'">');
    }
}

function get_data(requested_action)
{
    var data=$.ajax({
        type: "POST",
        url: '../getnew.php',  // relative path to the php file
        data: {
            request:requested_action
        }, 
        async: false,
        dataType: 'json'
    });
    var msg= data.responseText;
    return msg;
}

$（“#按钮”）。在（“单击”，函数（）{
显示_图像（）；
})
函数show_image（）{
var响应=获取数据（“获取随机图像”）；
response=jQuery.parseJSON（response）；
$。每个（响应、功能（键、值）{
//对数据执行以下操作：
$（'.image'）。追加（''）；
}
}
函数获取\u数据（请求的\u操作）
{
var data=$.ajax({
类型：“POST”，
url:“../getnew.php”，//php文件的相对路径
数据：{
请求：请求的行动
}, 
async:false，
数据类型：“json”
});
var msg=data.responseText；
返回味精；
}

如果你搜索，你会得到很多关于这方面的教程。我不太清楚如何使用$。但是我正在做什么。我已经尝试过了，但我仍然不确定。例如W3学校的这篇文章：-我不确定如何将其与我自己的问题联系起来。它给了我未捕获的语法错误：意外的标记o作为错误。如果我的回答有帮助，请投票或者接受它作为答案。调试您的代码超出了此问题的范围。现在似乎可以工作，但图像在新旧图像之间来回切换，这对我来说似乎有点复杂（编码新手），Uri Goren对下面这个问题的回答对我来说似乎更容易得到，但它给了我一个错误。你能明白为什么吗？你在控制台中得到了错误吗？你试过console.log（数据）了吗？看看你得到了什么？要看到控制台输出，右键单击页面中的任何地方，然后选择inspect element（mozilla的firebug扩展），他的解决方案给了我“未捕获语法错误：意外标记o”作为错误。