利用php做服務(wù)器和web前端的界面進(jìn)行交互
PHP與Web頁(yè)面交互是實(shí)現(xiàn)PHP網(wǎng)站與用戶交互的重要手段。希望查看本篇文章的學(xué)者首先查看一下PHP的基礎(chǔ)知識(shí),因?yàn)榻裉煊玫竭@個(gè)東西,現(xiàn)學(xué)現(xiàn)賣吧.后續(xù)會(huì)更新php服務(wù)器的基礎(chǔ)知識(shí)!
1.首先你要有一個(gè)界面 我這里利用我項(xiàng)目開發(fā)的一個(gè)簡(jiǎn)單界面截取下來進(jìn)行講解!項(xiàng)目機(jī)密 請(qǐng)勿**,你懂得!
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">預(yù)訂:<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部分其實(shí)是有八個(gè) 實(shí)現(xiàn)的是這樣的界面
因?yàn)閘i代碼都是一樣的 所以就不一一列舉了 大家明白就行了
ok 這里的都明白;下面就是用ajax進(jìn)行交互 就是js的代碼
在下面進(jìn)行加入一個(gè)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'>預(yù)訂:<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'>預(yù)訂:<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的幾個(gè)屬性大家映帶都懂 我簡(jiǎn)單說一下 type就是提交的方式 一共有post和get兩種 我用的是post</p><p>url就是服務(wù)器php的路徑就是提交數(shù)據(jù)到的地址,data就是我們提交的數(shù)據(jù),就是進(jìn)行向服務(wù)器進(jìn)行提交,然后服務(wù)器代碼就是以下代碼:</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); }
服務(wù)器的代碼 include進(jìn)來的php文件就是存儲(chǔ)數(shù)據(jù)的一個(gè)php文件下面會(huì)附上代碼;我解釋一下這個(gè)簡(jiǎn)單的服務(wù)器端的代碼
if($_POST["code"]==201 && $_POST["user"]=="admin"){ // echo json_encode(array("code"=>111)) ; echo json_encode($hotSale); }
這個(gè)判斷就是對(duì)客戶端那邊發(fā)過來的數(shù)據(jù)進(jìn)行的判斷 如果code和user都正確 則給你返回?cái)?shù)據(jù) 如果不等幾返回
else{ echo json_encode(array("code"=>402)); echo json_encode($hotSale); }
這是在開發(fā)中和服務(wù)器端的同事商量定下來的
下面我說一下正確的時(shí)候返回來的數(shù)據(jù)
<pre name="code" class="php">echo json_encode($hotSale);
就是這句 echo大家都知道是php里面的關(guān)鍵字 ,json_encode就是獲取我們加載 data.php
就是這個(gè)
<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" => "./百姓商城-百姓廣場(chǎng)網(wǎng)上商城-鄭州建材_鄭州家具_(dá)鄭州建材網(wǎng)_鄭州裝修公司-價(jià)格最低,保障質(zhì)量_files/56945f40088bc0491409db204dab9be3e0a3.jpg", "title"=>"南方家居 Q23025床(帶床墊)", "titleURL"=>"http://www.baixingmall.com/item/52a297380d2c004b75090030180f9be3e0a3.htm", "Nprice" => "1980", "Oprice"=>"1980", "number"=>"53" ); $hotSaleContent2=array( "imgURL"=>"./百姓商城-百姓廣場(chǎng)網(wǎng)上商城-鄭州建材_鄭州家具_(dá)鄭州建材網(wǎng)_鄭州裝修公司-價(jià)格最低,保障質(zhì)量_files/56945f4d0b610045fe09f8604dab9be3e0a3.jpg", "title"=>"富魄力 M-66型沙發(fā)", "titleURL"=>"http://www.baixingmall.com/item/5178d9660f230049d10847f06de39be3e0a3.htm", "Nprice"=>"3600", "Oprice"=>"8600", "number"=>"60" ); $hotSaleContent3=array( "imgURL"=>"./百姓商城-百姓廣場(chǎng)網(wǎng)上商城-鄭州建材_鄭州家具_(dá)鄭州建材網(wǎng)_鄭州裝修公司-價(jià)格最低,保障質(zhì)量_files/56945f570129804eec0921e04dab9be3e0a3.jpg", "title"=>"和木軒 HK8005電視柜", "titleURL"=>"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", "Nprice"=>"3600", "Oprice"=>"8600", "number"=>"60" ); $hotSaleContent4=array( "imgURL"=>"./百姓商城-百姓廣場(chǎng)網(wǎng)上商城-鄭州建材_鄭州家具_(dá)鄭州建材網(wǎng)_鄭州裝修公司-價(jià)格最低,保障質(zhì)量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", "title"=>"怡品源12F07-12E07餐桌椅", "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", "Nprice"=>"300", "Oprice"=>"800", "number"=>"600" ); $hotSaleContent5=array( "imgURL"=>"./百姓商城-百姓廣場(chǎng)網(wǎng)上商城-鄭州建材_鄭州家具_(dá)鄭州建材網(wǎng)_鄭州裝修公司-價(jià)格最低,保障質(zhì)量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", "title"=>"怡品源12F07-12E07餐桌椅", "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", "Nprice"=>"300", "Oprice"=>"800", "number"=>"600" ); $hotSaleContent6=array( "imgURL"=>"./百姓商城-百姓廣場(chǎng)網(wǎng)上商城-鄭州建材_鄭州家具_(dá)鄭州建材網(wǎng)_鄭州裝修公司-價(jià)格最低,保障質(zhì)量_files/56945f5f0cb640412e0aeb104d589be3e0a3.jpg", "title"=>"怡品源12F07-12E07餐桌椅", "titleURL"=>"http://www.baixingmall.com/item/52fec2ee0d0a4041ca08954018d89be3e0a3.htm", "Nprice"=>"300", "Oprice"=>"800", "number"=>"600" ); $hotSaleContent7=array( "imgURL"=>"./百姓商城-百姓廣場(chǎng)網(wǎng)上商城-鄭州建材_鄭州家具_(dá)鄭州建材網(wǎng)_鄭州裝修公司-價(jià)格最低,保障質(zhì)量_files/56945f570129804eec0921e04dab9be3e0a3.jpg", "title"=>"和木軒 HK8005電視柜", "titleURL"=>"http://www.baixingmall.com/item/526a0f8704a540492c0a3960345b9be3e0a3.htm", "Nprice"=>"3600", "Oprice"=>"8600", "number"=>"60" ); $hotSaleContent8=array( "imgURL"=>"./百姓商城-百姓廣場(chǎng)網(wǎng)上商城-鄭州建材_鄭州家具_(dá)鄭州建材網(wǎng)_鄭州裝修公司-價(jià)格最低,保障質(zhì)量_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>這里面就是所有的服務(wù)器提供的數(shù)據(jù) 然后進(jìn)行獲取那個(gè)數(shù)組</p><p><span style="font-family: Arial, Helvetica, sans-serif;">$hotSale;</p><p>然后傳到我們html的ajax的data里面即使這個(gè):</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);
這個(gè)就是ajax獲取成功的時(shí)候執(zhí)行的函數(shù)funcation()里面的data就獲取到了我們那個(gè)數(shù)組,其實(shí)他是json文件,只是像數(shù)組格式我們還要進(jìn)行轉(zhuǎn)換
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">var result=eval("("+data+")");這句話就是把他轉(zhuǎn)換成真正我們熟悉的array數(shù)組;
然后就是我們要八條數(shù)據(jù)進(jìn)行遍歷
<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'>預(yù)訂:<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就是我們的最大長(zhǎng)度了,
最后遍歷之后就會(huì)輸出八條了;不過肯定有人問 你怎么把服務(wù)器傳過來的數(shù)組加載到html中的;下面對(duì)上面的那個(gè)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'>預(yù)訂:<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>" }
大家可以看到這是一個(gè)自定義的數(shù)組然后把每一行都加一個(gè)"++"連起來 大家都明白,這是js中的鏈接方式;里面的數(shù)據(jù)替換是用的是
result[i].XXX; i就是進(jìn)行遍歷的數(shù)據(jù) 每一個(gè)不同的i從服務(wù)器json里面獲取不同的數(shù)據(jù) 因?yàn)檗D(zhuǎn)換成數(shù)組了 就可以用來獲取了;
XXX就是指的是每一個(gè)數(shù)組鍵,來獲取里面的值 放到屬性里面,就把這個(gè)html寫活了!!!
加載完顯示就是和上一個(gè)界面一樣的!!以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
php如何實(shí)現(xiàn)數(shù)據(jù)庫(kù)的備份和恢復(fù)
這篇文章主要介紹了php如何實(shí)現(xiàn)數(shù)據(jù)庫(kù)的備份和恢復(fù),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11PHP循環(huán)結(jié)構(gòu)實(shí)例講解
這篇文章主要介紹了PHP循環(huán)結(jié)構(gòu)實(shí)例講解,需要的朋友可以參考下2014-02-02php 無限級(jí)數(shù)據(jù)JSON格式及JS解析
公司要做個(gè)Flash效果的頁(yè)面,需要個(gè)無限級(jí)樹,顯示用戶邀請(qǐng)的好友及其下線,由此就構(gòu)成了無限級(jí)的關(guān)系,可能下線有無限多。2010-07-07ajax完美實(shí)現(xiàn)兩個(gè)網(wǎng)頁(yè) 分頁(yè)功能的實(shí)例代碼
ajax完美實(shí)現(xiàn)兩個(gè)網(wǎng)頁(yè) 分頁(yè)功能的實(shí)例代碼,需要的朋友可以參考一下2013-04-04php while循環(huán)得到循環(huán)次數(shù)
在for循環(huán)中,我們很容易得到循環(huán)次數(shù),因?yàn)槭亲鳛闂l件出現(xiàn)的。在while也可以得到,如下:2013-10-10發(fā)布一個(gè)用PHP fsockopen寫的HTTP下載的類
發(fā)布一個(gè)用PHP fsockopen寫的HTTP下載的類...2007-02-02CI框架AR數(shù)據(jù)庫(kù)操作常用函數(shù)總結(jié)
這篇文章主要介紹了CI框架AR數(shù)據(jù)庫(kù)操作常用函數(shù),結(jié)合實(shí)例形式總結(jié)分析了基于CI框架的數(shù)據(jù)庫(kù)增刪改查與緩存、結(jié)果集等相關(guān)操作函數(shù)與技巧,需要的朋友可以參考下2016-11-11分享PHP源碼批量抓取遠(yuǎn)程網(wǎng)頁(yè)圖片并保存到本地的實(shí)現(xiàn)方法
本篇文章給大家分享PHP源碼批量抓取遠(yuǎn)程網(wǎng)頁(yè)圖片并保存到本地的實(shí)現(xiàn)方法,對(duì)批量抓取網(wǎng)頁(yè)圖片相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12

PHP和javascript常用正則表達(dá)式及用法實(shí)例