PHP Server File Manager Development Summary (III): submitting AJAX requests using jquery

This section discusses the basic ways to submit AJAX requests using jquery and completes the basic method of displaying the first folder.

Also, this section discusses the basic ways to submit requests using picture links.

jquery is a powerful JS library that encapsulates complex JS operations into concise statements and provides support for Ajax. With the JQuery AJAX approach, you can request text, HTML, XML, or JSON from a remote server using HTTP Get and HTTP Post-and you can load the external data directly into the selected elements of the Web page. It is not easy to write regular Ajax code because different browsers do not have the same implementation for Ajax. This means that you have to write extra code to test your browser. However, the JQuery team solved the problem for us, and we only needed a single line of code to implement AJAX functionality.

--w3school

The following HTML is used to display the menu item above the folder List

<ul id= "Navi" >        <li><a href= "#"   Title= "Home"  onclick= "Onhome ()" > </a></li>        <li><a href= "#"  title= "Up"  onclick= "Onup ()" ></a ></li>        <li><a href= "#"  title= " Refresh " onclick=" Onrefresh () "></a></li>        <li><a href= "#"   title= "Upload"  onclick= "Onuploadfile ()" ></a></li>        <li><a href= "#"  title= "New file" onclick= "Onnewfile ()" ></a ></li>        <li><a href= "#"  title= "new  folder " onclick=" Onnewfolder () "></a></li></ul><br/>

Note that the UL applied to the CSS

UL Li{list-style:none;float:left;} #navi a{display:block;width:48px;height:48px;margin-left:0.5em;}

Where Li's style allows it to cancel the preceding symbol and convert it to a left-floating inline element instead of the default vertically arranged block element. The style of a is fixed with the displayed state, size, and left margin.

The display results are as follows:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/59/C3/wKioL1TgUESh9zIzAABwqOgp0jk377.jpg "title=" PHP File Manager 2.png "alt=" Wkiol1tguesh9zizaabwqogp0jk377.jpg "/>

Specifically to the left-most home, it uses a link to the image, by clicking on the link to send a request to the server.

<a href= "#" title= "Home" onclick= "Onhome ()" ></a>

Note that the destination address of the link is "#" so that it does not jump, but instead responds with the Onhome () function for the Click event onclick.

. topmenu{width:48px;height:48px;}

This style fixed the display size of the picture.

The Onhome () function needs to complete the following process:

1. Use Ajax to send requests to the server for the contents of the first folder;

2. Receives the content returned by the server and displays it to the intended location.

The basic syntax for sending AJAX requests using jquery is:

$.get (Url,callback); $.post (Url,data,callback);

Get is basically used to get (retrieve) data from the server. Note: The GET method may return cached data.

POST can also be used to fetch data from the server. However, the POST method does not cache data and is often used to send data together with the request.

Because this manager may refresh the contents of a folder repeatedly, it is more appropriate to use post to get content.

The following is the code content of Onhome ():

function Onhome () {var strdirname = "Home";    var strencodedname = Escape (strDirName);    $.post ("query.php", {act:strencodedname}, function (data) {$ (' #spanDirTable '). HTML (data); });}

Where Spandirtable is a div on a webpage that displays the contents of a folder.

Using the $.post function, place the home string in the Act form and post it to query.php,query.php to process the request and return the folder contents data, after which the data is replaced into the contents of the spandirtable.

The following is the fragment of the statement in query.php that processed the request.

         $strActName  = urldecode ($_post["Act");         switch  ($strActName)         {             case  "Home":                  $isDirContentView  =  true;                $ strdirname =  "/Home";                 break;        }         if  ($isDirContentView)         {             echo createdircontenttable ($strDirName);          } 

PHP uses $_post to get the value of the POST, so use $_post["Act" to get the value in the Act form.

This manager will default to "/home" to avoid damage to the system. In fact, it can also be defined as other locations that are more unlikely to compromise the system.

The createdircontenttable ($strDirName) function returns a list of folder contents created and is displayed through Echo to the return stream of the POST request.

Function createdircontenttable ($strDirName) {     $isSuceed  = true;     if  (!) ( $hDir  = opendir ($strDirName))     {         echo  "directory  ' $strDirName '  unavailable!";          $isSuceed  = false;    }     if  ($isSuceed)     {         printf ("<p class=\" page-title\ ">%s</p>",  $strDirName);echo <<<navi         <ul id= "Navi" >         <li><a href= "#"  title= "Home"  onclick= "Onhome ()" ></a></li>         <li><a href= "#"  title="Up"  onclick= "Onup ()" ></a ></li>        <li><a href= "#"  title= " Refresh " onclick=" Onrefresh () "></a></li>        <li><a href= "#"   title= "Upload"  onclick= "Onuploadfile ()" ></a></li>        <li><a href= "#"  title= "New file"  onclick= "Onnewfile ()" ></a></li>        <li><a  href= "#"  title= "New folder"  onclick= "Onnewfolder ()" ></a></li>        </ul><br/>navi;         echo  "<table>";         echo  "<tr><th>name</th><th>type</th><th>readalbe</th ><th>writable</th><th>excutable</th><th>size</th><th>created</ Th><th>modified</th><th>access</th><th>operation</th></tr> ";         while  ($fileName  = readdir ($hDir))!==false)         {             if  ($fileName  ==  "."  | |   $fileName  ==  "..")  continue;            if  (Is_file ($ strDirName. " /". $fileName)) &NBSP;&NBSP;&NBSP;&NBSP;&Nbsp;            $fileList [] =  $fileName;             if  (Is_dir ($strDirName. " /". $fileName))                  $dirList [] =  $fileName;        }          $isDirEmpty  = true;        if  ( Isset ($dirList))         {              $isDirEmpty  = false;             natsort ($dirList);             foreach ($dirList  as  $dirName)              {    &nbsP;           echo getdireleminfo ($strDirName,   $dirName);            }         }        if  (Isset ($fileList))         {              $isDirEmpty  = false;             natsort ($fileList);             foreach ($ filelist as  $fileName)             {                 echo  Getfileeleminfo ($strDirName,  $fileName);             }        }        echo  "</table>";         if  ($isDirEmpty)         {             echo  "directory  ' $strDirName '  is empty! ';         }        else  echo  "<div class=\" \ ">Total size: ". Sizetobytes (Calcdirsize ($strDirName)). " </div> ";         closedir ($hDir);     }}

The methods for navigating the contents of a folder are relatively fixed:

1. To open a folder handle using Opendir

2. Enumerate folder contents using Readdir

3. Use Is_file and Is_dir to classify content, and separately handle

4. Closing a handle with Closedir

   
   

The specific implementations of the two functions of Getdireleminfo and Getfileeleminfo are left to be described in a subsequent summary.

Display effects such as

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/59/C4/wKioL1ThOHjzGULHAAGv5dSTzGg012.jpg "title=" PHP File Manager 3.png "alt=" Wkiol1thohjzgulhaagv5dstzgg012.jpg "/>

This article is from the "Accplayer Small Place" blog, make sure to keep this source http://accplaystation.blog.51cto.com/9917407/1614656

PHP Server File Manager Development Summary (III): submitting AJAX requests using jquery