2013-06-28 193 views
1

你好老乡程序员,AJAX图像滑块

这是我第一次使用AJAX,所以我真的需要一些帮助(下周项目的最后期限,只有一对夫妇更多的东西,我完成了)。

所以理论是:

我工作的一个学生项目,一个网站,人们可以做广告他们的房屋买卖合同。

它有一个MySQL数据库,用于保存用户和属性的相关信息。在关于财产我有2个表:

  • 属性(存储id_property,id_user,名称,描述,地址等)
  • propertyimages(店id_property,id_image,路径,uploaddate)

我需要的是AJAX代码,将显示图像,一次一个,直到用户点击图像本身上或下/上一它下面的按钮,创建幻灯片,并自动填写一个带有当前图像的id_image的隐藏文本框,因此用户可以点击一个按钮/链接从数据库中选择图像。

这是我到目前为止的代码:

<?php session_start()?> 
<?php include 'w3.html'; ?> 
     <!-- put <title> code under here --> 
<?php include 'essentialhead.html'; ?> 
     <!-- put <head> code under here --> 

<?php include 'closeheadopenbody.html'; ?> 
      <!-- header --> 
      <?php include 'header.html'; ?> 
      <!-- content --> 
      <?php include 'row1clear.html'; ?> 
        <?php 
         $urlexplode = explode('?', "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); 
         $token = end($urlexplode); 

         $connection = mysql_connect("localhost","root") 
             or die("Problem connecting to MySQL!"); 
         mysql_select_db("imobili"); 

         $propertyquery = mysql_query("SELECT * 
                 FROM property 
                 WHERE id_property='".$token."'");    
         $rowproperty = mysql_fetch_array($propertyquery); 
         echo $rowproperty['name']; 
        ?> 
      <?php include 'row2clear.html'; ?> 
        <?php 
         echo'<div class="profilewrapper"> 
           <div class="propertyslideshow"> 
            <div class="tablecell"> 
             <div id="slide" class="slider">'; **HERE IS WHERE I NEED AJAX TO SHOW THE IMAGES** 
              $imagesquery = mysql_query("SELECT * 
                   FROM propertyimages 
                   WHERE id_property='".$rowproperty['id_property']."'");     
              while($rowimage = mysql_fetch_array($imagesquery)) 
              { 
               echo'<img class="sliderimg" alt="no image" src="'.$rowimage['path'].'">';        
              } 

         echo'   </div> 
            </div> 
           </div> 
           <div class="propertytools">'; **IF THE USER IS THE OWNER OF THE PROPERTY, OR AN ADMINISTRATOR, HE GETS ACCESS TO THE FOLLOWING 3 TOOLS: USE AS MAIN PHOTO, DELETE CURRENT IMAGE, AND DELETE PROPERTY** 
            if($_SESSION['username'] == $rowproperty['username'] or $_SESSION['permissions'] == 'admin') 
            { 
            echo'<form class="property" method="post" name="uploadform" action="" enctype="multipart/form-data"> 
             <fieldset> 
             <legend>Upload another image</legend> 
             <input type="file" id="foto" name="foto"/><input class="submit" type="submit" value="Submit"/> 
             </fieldset> 
             </form> 
             <form class="property" method="post" name="uploadform" action=""> 
             <input type="hidden" name="currentimgid" value="**I NEED THE id_img here in real time!**"/> 


             <input onclick="submitform()" class="submitlink" type="submit" id="propform" name="setprev" value="Use this image as Preview"/> 
             **THE INPUT BELOW WILL POST THE id_image** 
             <input onclick="submitform()" class="submitlink" type="submit" id="propform" name="delimg" value="Delete this image"/> 
             <input onclick="submitform()" class="submitlink" type="submit" id="propform" name="delprop" value="Delete this property"/> 
             <script> 
              function submitform() 
              { 
               var r=confirm("Are you sure?"); 
               if(r==true) 
               { 
                document.propform.submit(); 
               } 
              } 
             </script> 
             </form>'; 
            } 
         echo' </div> 
           <div class="propertydetails"> 
            <div class="profiledetails">Date Of Construction</div>'.$rowproperty['dateconstruction'].' 
            <div class="profiledetails">Rent</div>'.$rowproperty['rentvalue'].' 
            <div class="profiledetails">Sell</div>'.$rowproperty['sellvalue'].' 
           </div> 
          </div>'; 



         echo' <form class="comment" name="commentform" action=""> 
           Leave a comment<br> 
           <textarea name="commentinput"></textarea> 
           <input type="submit" class="submit" value="Send"> 
           </form>'; 
          mysql_close(); 
        ?> 
        <?php 
         if(ISSET($_POST['delprop'])) 
         { 
          echo''; 
          $sql = "DELETE FROM property 
            WHERE id_property = ".$token; 
          mysql_query($sql); 

          $sql = "DELETE FROM propertyimages 
            WHERE id_property = ".$token; 
          mysql_query($sql); 
         } 
        //var_dump($_FILES['foto']); 
         if(ISSET($_FILES['foto'])) 
         { 
          $username = $_SESSION['username']; 
          //upload 
          $allowedExts = array("gif", "jpeg", "jpg", "png", "JPG"); 
          $explode = explode(".", $_FILES["foto"]["name"]); 
          $extension = end($explode); 
          //var_dump($extension); 
          if ((($_FILES["foto"]["type"] == "image/gif") 
          || ($_FILES["foto"]["type"] == "image/jpeg") 
          || ($_FILES["foto"]["type"] == "image/jpg") 
          || ($_FILES["foto"]["type"] == "image/pjpeg") 
          || ($_FILES["foto"]["type"] == "image/x-png") 
          || ($_FILES["foto"]["type"] == "image/png")) 
          && ($_FILES["foto"]["size"] < 200000000) //20MB 
          && in_array($extension, $allowedExts)) 
          { 
           if ($_FILES["foto"]["error"] > 0) 
           { 
           echo "Return Code: " . $_FILES["foto"]["error"] . "<br>"; 
           } 
           else 
           { 
           echo "Upload: " . $_FILES["foto"]["name"] . "<br>"; 
           echo "Type: " . $_FILES["foto"]["type"] . "<br>"; 
           echo "Size: " . ($_FILES["foto"]["size"]/1024) . " kB<br>"; 
           echo "Temp file: " . $_FILES["foto"]["tmp_name"] . "<br>"; 
           $path1 = "upload/".$username; 
           echo $path1; 
           $path2 = "upload/".$username."/".$token; 
            $dest = "upload/".$username."/".$token. "/". $_FILES["foto"]["name"]; 
            echo $dest; 
            if (file_exists("upload/" . $_FILES["foto"]["name"])) 
            { 
             echo $_FILES["foto"]["name"] . " already exists. "; 
            } 
            else 
            { 
            if (! is_dir($path1)) { 
             mkdir($path1); 
            } 
            if (! is_dir($path2)) { 
             mkdir($path2); 
            } 
            move_uploaded_file($_FILES["foto"]["tmp_name"], $dest); 
            } 
           } 
          $datetime = date_create()->format('Y-m-d H:i:s'); 
          $sqlimages = "INSERT INTO propertyimages (path, uploaddate, id_property) VALUES('$dest', '$datetime', '$token')";      
          //var_dump($sqlimages); 
          mysql_query($sqlimages); 
          } 
          else 
          { 
           echo "<script>alert(\"Wrong extension\")</script>"; 
          } 
         } 
        ?> 
      <?php include 'contentclose.html'; ?> 
      <!-- footer --> 
      <?php include 'footer.php'; ?> 
+0

好吧,那究竟是什么问题? – Bojangles

+0

我不知道如何用AJAX做到这一点。 –

回答

0
  1. 你必须只显示用户的第一张图像。
  2. 将当前图像记下为会话。
  3. 制作一个请求下一张图片的按钮。
  4. 当从服务器获取下一个图像时,在同一个会话中将新图像索引减少并继续。 我不能给你写这个很复杂的代码。
0

使用像jQuery这样的工具库将在这里帮助你。看看$.ajax()方法,你应该能够从那里掌握它。还有$.post()这是一个简写版本,用于从服务器发送和检索数据。例如:

$('.button').on('click', function(e) { 
    e.preventDefault(); 

    $.post('url.php', { data: 'here' }, function(result) { 
     // `result` contains the server response 
    }); 
}); 

url.php只是一个正常的接受POST数据的PHP脚本。任何东西echo ed都会发送回result中的回调函数。