利用php做服務器和web前端的界面進行交互

更新時間：2016年10月31日 09:59:58 作者：張張張的博客

PHP與Web頁面交互是實現(xiàn)PHP網(wǎng)站與用戶交互的重要手段。本篇文章主要介紹了利用php做服務器和web前端的界面進行交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

PHP與Web頁面交互是實現(xiàn)PHP網(wǎng)站與用戶交互的重要手段。希望查看本篇文章的學者首先查看一下PHP的基礎知識,因為今天用到這個東西,現(xiàn)學現(xiàn)賣吧.后續(xù)會更新php服務器的基礎知識!

1.首先你要有一個界面我這里利用我項目開發(fā)的一個簡單界面截取下來進行講解!項目機密請勿**,你懂得!

html代碼和界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>百姓商城</title> 
  <link  rel="stylesheet" type="text/css" 
     media="screen"> 
</head> 
<body> 
<script type="text/javascript" src="jquery-3.0.0.min.js"></script> 
<div class="newindex_box mar_t_10 clearfix"> 
  <div class="index_hot_sale"> 
    <ul class="hot_sale_ul" id="hot_sale"> 
      <li class="hot_sale_li left" style="margin-right:0px;"> 
        <div class="pic"><a style="width:260px;height:172px;" 
                   
                  title=" "><img style="width:260px;height:172px;" alt="維多利陶瓷 自然石系列" 
                          src="http://image01.baixingstatic.com/system/56945f870cfe00463b0acfe04c9d9be3e0a3.jpg"></a> 
        </div> 
        <p class="tit"><a  
                 title=""></a></p> 
 
        <div class="price"><span class="right">預訂：<b class="yd_num">44</b>件</span><span 
            class="bx_price">￥62.1</span><span class="store_price">￥128</span></div> 
      </li> 
     </ul> 
  </div> 
</div>

</pre><pre name="code" class="html">上面的代碼li部分其實是有八個實現(xiàn)的是這樣的界面

因為li代碼都是一樣的所以就不一一列舉了大家明白就行了

ok 這里的都明白;下面就是用ajax進行交互就是js的代碼

在下面進行加入一個js的代碼塊

<pre name="code" class="javascript"><script type="text/javascript"> 
  var str=""; 
  $.ajax({ 
    type:"post", 
    url:"postDemo.php", 
    data:{ 
      "code":"201", 
      "user":"admin" 
    }, 
    success:function(data){ 
      var result=eval("("+data+")"); 
      alert(data); 
      for(var i=0;i<result.length;i++){ 
        if ((i+1)%4){ 
          var str = "<li class='hot_sale_li left' >" + 
              "<div class='pic'><a style='width:260px;height:172px;' href='" + result[i].titleURL + "' title='維多利陶瓷 自然石系列'><img style='width:260px;height:172px;' alt='" + result[i].title + "' src='" + result[i].imgURL + "' /></a></div>" + 
              "<p class='tit'><a href='" + result[i].titleURL + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
              "<div class='price'><span class='right'>預訂：<b class='yd_num'>" + result[i].number + "</b>件</span><span class='bx_price'>￥" + result[i].Nprice + "</span><span class='store_price'>￥" + result[i].Oprice + "</span></div> </li>" 
 
        } 
        else { 
// 
          var str = "<li class='hot_sale_li left'style='margin-right: 0px' >" + 
              "<div class='pic'><a style='width:260px;height:172px;' href='" + result[i].titleURL + "' title='維多利陶瓷 自然石系列'><img style='width:260px;height:172px;' alt='" + result[i].title + "' src='" + result[i].imgURL + "' /></a></div>" + 
              "<p class='tit'><a href='" + result[i].titleURL + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
              "<div class='price'><span class='right'>預訂：<b class='yd_num'>" + result[i].number + "</b>件</span><span class='bx_price'>￥" + result[i].Nprice + "</span><span class='store_price'>￥" + result[i].Oprice + "</span></div> </li>" 
 
        } 
        $(" .index_hot_sale #hot_sale").append(str); 
//       var oneTitle = result[i].title; 
//        $(".hot_sale_ul li:eq("+i+") a").attr("title",result[i].title); 
//        $(".hot_sale_ul li:eq("+i+") a").attr("title",result[i].title); 
 
      } 
    } 
  }) 
</script>

<p></pre><p>上面的ajax的幾個屬性大家映帶都懂 我簡單說一下 type就是提交的方式 一共有post和get兩種 我用的是post</p><p>url就是服務器php的路徑就是提交數(shù)據(jù)到的地址,data就是我們提交的數(shù)據(jù),就是進行向服務器進行提交,然后服務器代碼就是以下代碼:</p><p></p><p><pre name="code" class="php"><?php</p>/** 
 * Created by PhpStorm. 
 * User: Administrator 
 * Date: 2016-7-15 
 * Time: 17:28 
 */ 
include "data.php"; 
if($_POST["code"]==201 && $_POST["user"]=="admin"){ 
//  echo json_encode(array("code"=>111)) ; 
  echo json_encode($hotSale); 
}else{ 
  echo json_encode(array("code"=>402)); 
  echo json_encode($hotSale); 
}

服務器的代碼 include進來的php文件就是存儲數(shù)據(jù)的一個php文件下面會附上代碼;我解釋一下這個簡單的服務器端的代碼

if($_POST["code"]==201 && $_POST["user"]=="admin"){ 
//  echo json_encode(array("code"=>111)) ; 
  echo json_encode($hotSale); 
}

這個判斷就是對客戶端那邊發(fā)過來的數(shù)據(jù)進行的判斷如果code和user都正確則給你返回數(shù)據(jù) 如果不等幾返回

else{ 
  echo json_encode(array("code"=>402)); 
  echo json_encode($hotSale); 
}

這是在開發(fā)中和服務器端的同事商量定下來的

下面我說一下正確的時候返回來的數(shù)據(jù)

<pre name="code" class="php">echo json_encode($hotSale);

就是這句 echo大家都知道是php里面的關鍵字 ,json_encode就是獲取我們加載 data.php
就是這個

<pre name="code" class="php"><?php 
/** 
 * Created by PhpStorm. 
 * User: Administrator 
 * Date: 2016-7-14 
 * Time: 19:53 
 */ 
header("Content-type:text/html;charset=utf-8"); 
$hotSaleContent1 = array( 
  "imgURL" => "./百姓商城-百姓廣場網(wǎng)上商城-鄭州建材_鄭州家具_鄭州建材網(wǎng)_鄭州裝修公司-價格最低,保障質量_files/56945f40088bc0491409db204dab9be3e0a3.jpg", 
  "title"=>"南方家居 Q23025床(帶床墊)", 
  "titleURL"=>"http://www.baixingmall.com/item/52a297380d2c004b75090030180f9be3e0a3.htm", 
  "Nprice" => "1980", 
  "Oprice"=>"1980", 
  "number"=>"53" 
); 
$hotSaleContent2=array( 
  "imgURL"=>"./百姓商城-百姓廣場網(wǎng)上商城-鄭州建材_鄭州家具_鄭州建材網(wǎng)_鄭州裝修公司-價格最低,保障質量_files/56945f4d0b610045fe09f8604dab9be3e0a3.jpg", 
  "title"=>"富魄力 M-66型沙發(fā)", 
  "titleURL"=>"http://www.baixingmall.com/item/5178d9660f230049d10847f06de39be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSaleContent3=array( 
  "imgURL"=>"./百姓商城-百姓廣場網(wǎng)上商城-鄭州建材_鄭州家具_鄭州建材網(wǎng)_鄭州裝修公司-價格最低,保障質量_files/56945f570129804eec0921e04dab9be3e0a3.jpg", 
  "title"=>"和木軒 HK8005電視柜", 
  "titleURL"=>"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSaleContent4=array( 
  "imgURL"=>"./百姓商城-百姓廣場網(wǎng)上商城-鄭州建材_鄭州家具_鄭州建材網(wǎng)_鄭州裝修公司-價格最低,保障質量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=>"怡品源12F07-12E07餐桌椅", 
  "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=>"300", 
  "Oprice"=>"800", 
  "number"=>"600" 
); 
$hotSaleContent5=array( 
  "imgURL"=>"./百姓商城-百姓廣場網(wǎng)上商城-鄭州建材_鄭州家具_鄭州建材網(wǎng)_鄭州裝修公司-價格最低,保障質量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=>"怡品源12F07-12E07餐桌椅", 
  "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=>"300", 
  "Oprice"=>"800", 
  "number"=>"600" 
); 
$hotSaleContent6=array( 
  "imgURL"=>"./百姓商城-百姓廣場網(wǎng)上商城-鄭州建材_鄭州家具_鄭州建材網(wǎng)_鄭州裝修公司-價格最低,保障質量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=>"怡品源12F07-12E07餐桌椅", 
  "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=>"300", 
  "Oprice"=>"800", 
  "number"=>"600" 
); 
$hotSaleContent7=array( 
  "imgURL"=>"./百姓商城-百姓廣場網(wǎng)上商城-鄭州建材_鄭州家具_鄭州建材網(wǎng)_鄭州裝修公司-價格最低,保障質量_files/56945f570129804eec0921e04dab9be3e0a3.jpg", 
  "title"=>"和木軒 HK8005電視柜", 
  "titleURL"=>"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSaleContent8=array( 
  "imgURL"=>"./百姓商城-百姓廣場網(wǎng)上商城-鄭州建材_鄭州家具_鄭州建材網(wǎng)_鄭州裝修公司-價格最低,保障質量_files/56945f4d0b610045fe09f8604dab9be3e0a3.jpg", 
  "title"=>"富魄力 M-66型沙發(fā)", 
  "titleURL"=>"http://www.baixingmall.com/item/5178d9660f230049d10847f06de39be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSale=array($hotSaleContent1, 
  $hotSaleContent2,$hotSaleContent3, 
  $hotSaleContent4,$hotSaleContent5, 
  $hotSaleContent6,$hotSaleContent7, 
  $hotSaleContent8); 
<p>這里面就是所有的服務器提供的數(shù)據(jù) 然后進行獲取那個數(shù)組</p><p><span style="font-family: Arial, Helvetica, sans-serif;">$hotSale;</p><p>然后傳到我們html的ajax的data里面即使這個:</span></p>

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">success:function(data){ 
      var result=eval("("+data+")"); 
      alert(data);

這個就是ajax獲取成功的時候執(zhí)行的函數(shù)funcation()里面的data就獲取到了我們那個數(shù)組,其實他是json文件,只是像數(shù)組格式我們還要進行轉換
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">var result=eval("("+data+")");這句話就是把他轉換成真正我們熟悉的array數(shù)組;

然后就是我們要八條數(shù)據(jù)進行遍歷

<pre name="code" class="html">for(var i=0;i<result.length;i++){      
          var str = "<li class='hot_sale_li left' >" + 
              "<div class='pic'><a style='width:260px;height:172px;' href='" + result[i].titleURL + "' title='維多利陶瓷 自然石系列'><img style='width:260px;height:172px;' alt='" + result[i].title + "' src='" + result[i].imgURL + "' /></a></div>" + 
              "<p class='tit'><a href='" + result[i].titleURL + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
              "<div class='price'><span class='right'>預訂：<b class='yd_num'>" + result[i].number + "</b>件</span><span class='bx_price'>￥" + result[i].Nprice + "</span><span class='store_price'>￥" + result[i].Oprice + "</span></div> </li>" 
 
        }

result.length就是我們的最大長度了,

最后遍歷之后就會輸出八條了;不過肯定有人問你怎么把服務器傳過來的數(shù)組加載到html中的;下面對上面的那個var str里面的內(nèi)容講解一下:

<pre name="code" class="html" style="font-family: Arial, Helvetica, sans-serif;">var str = "<li class='hot_sale_li left' >" + 
              "<div class='pic'><a style='width:260px;height:172px;' href='" + result[i].titleURL + "' title='維多利陶瓷 自然石系列'><img style='width:260px;height:172px;' alt='" + result[i].title + "' src='" + result[i].imgURL + "' /></a></div>" + 
              "<p class='tit'><a href='" + result[i].titleURL + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
              "<div class='price'><span class='right'>預訂：<b class='yd_num'>" + result[i].number + "</b>件</span><span class='bx_price'>￥" + result[i].Nprice + "</span><span class='store_price'>￥" + result[i].Oprice + "</span></div> </li>" 
 
        }

大家可以看到這是一個自定義的數(shù)組然后把每一行都加一個"++"連起來大家都明白,這是js中的鏈接方式;里面的數(shù)據(jù)替換是用的是
result[i].XXX; i就是進行遍歷的數(shù)據(jù) 每一個不同的i從服務器json里面獲取不同的數(shù)據(jù) 因為轉換成數(shù)組了就可以用來獲取了;
XXX就是指的是每一個數(shù)組鍵,來獲取里面的值放到屬性里面,就把這個html寫活了!!!

加載完顯示就是和上一個界面一樣的!!以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

PHP大文件分片上傳的實現(xiàn)方法
在網(wǎng)站開發(fā)中，經(jīng)常會有上傳文件的需求，有的文件size太大直接上傳，經(jīng)常會導致上傳過程中耗時太久，大量占用帶寬資源，因此有了分片上傳。接下來通過本文給大家介紹PHP大文件分片上傳的實現(xiàn)方法,需要的朋友可以參考下
2018-10-10
深入剖析瀏覽器退出之后php還會繼續(xù)執(zhí)行么
覽器退出之后php還會繼續(xù)執(zhí)行么？下面小編就為大家介紹一下究竟覽器退出之后php還會不會繼續(xù)執(zhí)行。一起跟隨小編過來看看吧
2016-05-05
PHP面試題之文件目錄操作
本篇文章是我在之前面試這家公司時遇到的問題，當時代碼寫的不全，后來通過查閱相關資料，整理出來的一份分享給大家
2015-10-10
基于PHP讀取TXT文件向數(shù)據(jù)庫導入海量數(shù)據(jù)的方法
本篇文章小編為大家介紹，基于PHP讀取TXT文件向數(shù)據(jù)庫導入海量數(shù)據(jù)的方法。需要的朋友參考下
2013-04-04
php文字水印和php圖片水印實現(xiàn)代碼(二種加水印方法)
有時上傳圖片時需要給網(wǎng)站加上水印，水印可以分為文字水印和圖片水印,下面就實現(xiàn)這二種水印
2013-12-12
PHP等比例壓縮圖片的實例代碼
本文通過一段簡單的代碼給大家介紹PHP等比例壓縮圖片的方法，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-07-07
thinkphp分頁集成實例
下面小編就為大家?guī)硪黄猼hinkphp分頁集成實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
使用php計算排列組合的方法
本文用PHP要解決的數(shù)學問題是算出C(a,1) * C(b, 1) * ... * C(n, 1)的組合情況，其中C(n, 1)代表從n個元素里任意取一個元素
2013-11-11
ThinkPHP模板自定義標簽使用方法
這篇文章主要介紹了ThinkPHP模板自定義標簽使用方法,需要的朋友可以參考下
2014-06-06
PHP接口類（interface）的定義、特點和應用示例
這篇文章主要介紹了PHP接口類（interface）,結合實例形式分析了PHP接口類（interface）的基本功能、定義、特點、用法與相關注意事項,需要的朋友可以參考下
2020-05-05