通过点击按钮从PHP文件获取数据

Question

加载页面时，我有两个独立的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']; 

在main.php：

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

据我所知，你使用jQuery的$不用彷徨获取数据从getnew.php但究竟如何能然后我使用这些数据来更改背景图片而不必刷新页面？

例如：style="background-image: url('<?php echo $img1link ?>')">

Answer 1

你需要使用AJAX，从服务器发送数据，并分析它在客户端

这是根据您的片断

代码示例

在getnew.php：

$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(){ 
    $.getJSON("getnew.php",function(data){ 
    //use data.img2 and data.img1 and set the background 
    // for example: $('#someDiv').css('background-image',"url('"+data.img1+"')"); 
    }); 
}) 

Answer 2

使用jQuery CSS codes..as你可以从页面获取数据，传递jquery.css码图片的路径，它会做按你的愿望。

尝试分析代码

其放置在一个将在功能上的点击被称为finction： 上的成功，你可以使用CSS像代码： 这仅仅是在阿贾克斯/ 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" 
         }); 

Answer 3

只是一个快速的脚本，但希望它帮助：在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; 
}