搜尋

首頁 >後端開發 >php教程 >利用php做伺服器和web前端的介面進行交互

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

墨辰丷
墨辰丷原創
2018-05-31 09:39:562144瀏覽
<p>PHP與Web頁面互動是實現PHP網站與使用者互動的重要手段。這篇文章主要介紹了利用php做伺服器和web前端的介面進行交互，具有一定的參考價值，有興趣的夥伴們可以參考一下。

<p>PHP與Web頁面互動是實現PHP網站與使用者互動的重要手段。希望查看本篇文章的學者首先查看一下PHP的基礎知識,因為今天用到這個東西,現學現賣吧.後續會更新php伺服器的基礎知識!

<p>1.首先你要有一個介面   我這裡利用我專案開發的簡單介面取下來進行解說!專案機密  請勿**,你懂得!

##html程式碼與介面<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>百姓商城</title> 
  <link href="http://www.baixingstatic.com/css/newindex4.css?v=20141022.css" rel="stylesheet" type="text/css" 
     media="screen"> 
</head> 
<body> 
<script type="text/javascript" src="jquery-3.0.0.min.js"></script> 
<p class="newindex_box mar_t_10 clearfix"> 
  <p class="index_hot_sale"> 
    <ul class="hot_sale_ul" id="hot_sale"> 
      <li class="hot_sale_li left" style="margin-right:0px;"> 
        <p class="pic"><a style="width:260px;height:172px;" 
                  href="http://www.baixingmall.com/item/565521bf0305c044a508ade00f539be3e0a3.htm" 
                  title=" "><img style="width:260px;height:172px;" alt="维多利陶瓷 自然石系列" 
                          src="http://image01.baixingstatic.com/system/56945f870cfe00463b0acfe04c9d9be3e0a3.jpg"></a> 
        </p> 
        <p class="tit"><a href="http://www.baixingmall.com/item/565521bf0305c044a508ade00f539be3e0a3.htm" 
                 title=""></a></p> 
 
        <p 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></p> 
      </li> 
     </ul> 
  </p> 
</p>

<p>

 bc5574f69a0cba105bc93bd3dc13c4ecea444e6a14303e8217bef847d47d859b上面的程式碼li部分其實是有八個實現的是這樣的介面<p>

<p>因為li程式碼都是一樣的所以就不一一列舉了大家明白就行了

<p>
ok 這裡的都明白;下面就是用ajax進行互動就是js的程式碼

<p>
在下面進行加入一個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=&#39;hot_sale_li left&#39; >" + 
              "<p class=&#39;pic&#39;><a style=&#39;width:260px;height:172px;&#39; href=&#39;" + result[i].titleURL + "&#39; title=&#39;维多利陶瓷 自然石系列&#39;><img style=&#39;width:260px;height:172px;&#39; alt=&#39;" + result[i].title + "&#39; src=&#39;" + result[i].imgURL + "&#39; /></a></p>" + 
              "<p class=&#39;tit&#39;><a href=&#39;" + result[i].titleURL + "&#39; title=&#39;" + result[i].title + "&#39;>" + result[i].title + "</a></p>" + 
              "<p class=&#39;price&#39;><span class=&#39;right&#39;>预订：<b class=&#39;yd_num&#39;>" + result[i].number + "</b>件</span><span class=&#39;bx_price&#39;>￥" + result[i].Nprice + "</span><span class=&#39;store_price&#39;>￥" + result[i].Oprice + "</span></p> </li>" 
 
        } 
        else { 
// 
          var str = "<li class=&#39;hot_sale_li left&#39;style=&#39;margin-right: 0px&#39; >" + 
              "<p class=&#39;pic&#39;><a style=&#39;width:260px;height:172px;&#39; href=&#39;" + result[i].titleURL + "&#39; title=&#39;维多利陶瓷 自然石系列&#39;><img style=&#39;width:260px;height:172px;&#39; alt=&#39;" + result[i].title + "&#39; src=&#39;" + result[i].imgURL + "&#39; /></a></p>" + 
              "<p class=&#39;tit&#39;><a href=&#39;" + result[i].titleURL + "&#39; title=&#39;" + result[i].title + "&#39;>" + result[i].title + "</a></p>" + 
              "<p class=&#39;price&#39;><span class=&#39;right&#39;>预订：<b class=&#39;yd_num&#39;>" + result[i].number + "</b>件</span><span class=&#39;bx_price&#39;>￥" + result[i].Nprice + "</span><span class=&#39;store_price&#39;>￥" + result[i].Oprice + "</span></p> </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>

<p>
<p>
<p>上面的ajax的几个属性大家映带都懂 我简单说一下 type就是提交的方式 一共有post和get两种 我用的是post

<p>url就是服务器php的路径就是提交数据到的地址,data就是我们提交的数据,就是进行向服务器进行提交,然后服务器代码就是以下代码:

<p>

<p>
<?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檔案就是儲存資料的一個php檔案下面會附上程式碼;我解釋一下這個簡單的伺服器端的程式碼

<p> 

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

<p>

這個判斷就是對客戶端那邊發過來的資料進行的判斷  如果code和user都正確  則給你回傳資料  如果不等幾回傳<p> 

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

這是在開發中和伺服器端的同事商量定下來的

<p>下面我說一下正確的時候返回來的資料

<p>

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

就是這句echo大家都知道是php裡面的關鍵字,json_encode就是取得我們載入data.php

就是這個

<p>

<p>
 "./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f40088bc0491409db204dab9be3e0a3.jpg", 
  "title"=>"南方家居 Q23025床(带床垫)", 
  "titleURL"=>"http://www.baixingmall.com/item/52a297380d2c004b75090030180f9be3e0a3.htm", 
  "Nprice" => "1980", 
  "Oprice"=>"1980", 
  "number"=>"53" 
); 
$hotSaleContent2=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f4d0b610045fe09f8604dab9be3e0a3.jpg", 
  "title"=>"富魄力 M-66型沙发", 
  "titleURL"=>"http://www.baixingmall.com/item/5178d9660f230049d10847f06de39be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSaleContent3=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f570129804eec0921e04dab9be3e0a3.jpg", 
  "title"=>"和木轩 HK8005电视柜", 
  "titleURL"=>"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSaleContent4=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=>"怡品源12F07-12E07餐桌椅", 
  "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=>"300", 
  "Oprice"=>"800", 
  "number"=>"600" 
); 
$hotSaleContent5=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=>"怡品源12F07-12E07餐桌椅", 
  "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=>"300", 
  "Oprice"=>"800", 
  "number"=>"600" 
); 
$hotSaleContent6=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", 
  "title"=>"怡品源12F07-12E07餐桌椅", 
  "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", 
  "Nprice"=>"300", 
  "Oprice"=>"800", 
  "number"=>"600" 
); 
$hotSaleContent7=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f570129804eec0921e04dab9be3e0a3.jpg", 
  "title"=>"和木轩 HK8005电视柜", 
  "titleURL"=>"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", 
  "Nprice"=>"3600", 
  "Oprice"=>"8600", 
  "number"=>"60" 
); 
$hotSaleContent8=array( 
  "imgURL"=>"./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_files/56945f4d0b610045fe09f8604dab9be3e0a3.jpg", 
  "title"=>"富魄力 M-66型沙发", 
  "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>这里面就是所有的服务器提供的数据 然后进行获取那个数组
<p>$hotSale;
<p>然后传到我们html的ajax的data里面即使这个:



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

<p>這個就是ajax取得成功的時候執行的函數funcation()裡面的data就取得到了我們那個陣列,其實他是json檔,只是像數組格式我們還要進行轉換
f8293c9a95b2c800a98c9e08a8fed1e6494c0df226525cc046cf4930a65bbd6fea444e6a14303e8217bef847d47d859bvar result=eval("(" data ")");這句話就是把他轉換成真正我們熟悉的array數組;
 <p>
然後就是我們要八條資料進行遍歷<p>
<pre name="code" class="html">for(var i=0;i<result.length;i++){      
          var str = "<li class=&#39;hot_sale_li left&#39; >" + 
              "<p class=&#39;pic&#39;><a style=&#39;width:260px;height:172px;&#39; href=&#39;" + result[i].titleURL + "&#39; title=&#39;维多利陶瓷 自然石系列&#39;><img style=&#39;width:260px;height:172px;&#39; alt=&#39;" + result[i].title + "&#39; src=&#39;" + result[i].imgURL + "&#39; /></a></p>" + 
              "<p class=&#39;tit&#39;><a href=&#39;" + result[i].titleURL + "&#39; title=&#39;" + result[i].title + "&#39;>" + result[i].title + "</a></p>" + 
              "<p class=&#39;price&#39;><span class=&#39;right&#39;>预订：<b class=&#39;yd_num&#39;>" + result[i].number + "</b>件</span><span class=&#39;bx_price&#39;>￥" + result[i].Nprice + "</span><span class=&#39;store_price&#39;>￥" + result[i].Oprice + "</span></p> </li>" 
 
        }

<p>result.length就是我們的最大長度了,
#最後遍歷之後就會輸出八條了;不過一定有人問你怎麼把伺服器傳過來的陣列載入到html中的;下面對上面的那個var str裡面的內容講解一下:<p>
<pre name="code" class="html" style="font-family: Arial, Helvetica, sans-serif;">var str = "<li class=&#39;hot_sale_li left&#39; >" + 
              "<p class=&#39;pic&#39;><a style=&#39;width:260px;height:172px;&#39; href=&#39;" + result[i].titleURL + "&#39; title=&#39;维多利陶瓷 自然石系列&#39;><img style=&#39;width:260px;height:172px;&#39; alt=&#39;" + result[i].title + "&#39; src=&#39;" + result[i].imgURL + "&#39; /></a></p>" + 
              "<p class=&#39;tit&#39;><a href=&#39;" + result[i].titleURL + "&#39; title=&#39;" + result[i].title + "&#39;>" + result[i].title + "</a></p>" + 
              "<p class=&#39;price&#39;><span class=&#39;right&#39;>预订：<b class=&#39;yd_num&#39;>" + result[i].number + "</b>件</span><span class=&#39;bx_price&#39;>￥" + result[i].Nprice + "</span><span class=&#39;store_price&#39;>￥" + result[i].Oprice + "</span></p> </li>" 
 
        }

<p>
大家可以看到這是一個自訂的數組然後把每一行都加一個" "連起來大家都明白,這是js中的鏈接方式;裡面的資料替換是用的是
result[i].XXX; i就是進行遍歷的資料每一個不同的i從伺服器json裡面取得不同的資料因為轉換成陣列了就可以用來取得了;XXX就是指的是每一個陣列鍵,來取得裡面的值放到屬性裡面,就把這個html寫活了!!!
###以上就是本文的全部內容，希望對大家的學習有幫助。 ###############相關推薦：#########PHP使用星號取代使用者名稱手機與郵件信箱部分字元########### ####PHP裝飾器模式使用案例分析###############PHP多執行緒模擬實作秒殺搶單活動（附程式碼）########### #################
以上是利用php做伺服器和web前端的介面進行交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：利用php實作一週之內自動登入儲存機制下一篇：利用php實作一週之內自動登入儲存機制

相關文章

看更多