利用php做服务器和web前端的界面进行交互
PHP与Web页面交互是实现PHP网站与用户交互的重要手段。希望查看本篇文章的学者首先查看一下PHP的基础知识,因为今天用到这个东西,现学现卖吧.后续会更新php服务器的基础知识!
1.首先你要有一个界面 我这里利用我项目开发的一个简单界面截取下来进行讲解!项目机密 请勿**,你懂得!
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 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>
<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;"
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>
</div>
<p class="tit"><a href="http://www.baixingmall.com/item/565521bf0305c044a508ade00f539be3e0a3.htm"
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部分其实是有八个 实现的是这样的界面
因为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的路径就是提交数据到的地址,data就是我们提交的数据,就是进行向服务器进行提交,然后服务器代码就是以下代码:</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文件就是存储数据的一个php文件下面会附上代码;我解释一下这个简单的服务器端的代码
if($_POST["code"]==201 && $_POST["user"]=="admin"){
// echo json_encode(array("code"=>111)) ;
echo json_encode($hotSale);
}
这个判断就是对客户端那边发过来的数据进行的判断 如果code和user都正确 则给你返回数据 如果不等几返回
else{
echo json_encode(array("code"=>402));
echo json_encode($hotSale);
}
这是在开发中和服务器端的同事商量定下来的
下面我说一下正确的时候返回来的数据
<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" => "./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_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><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获取成功的时候执行的函数funcation()里面的data就获取到了我们那个数组,其实他是json文件,只是像数组格式我们还要进行转换
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">var result=eval("("+data+")");这句话就是把他转换成真正我们熟悉的array数组;
然后就是我们要八条数据进行遍历
<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就是我们的最大长度了,
最后遍历之后就会输出八条了;不过肯定有人问 你怎么把服务器传过来的数组加载到html中的;下面对上面的那个var str里面的内容讲解一下:
<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>"
}
大家可以看到这是一个自定义的数组然后把每一行都加一个"++"连起来 大家都明白,这是js中的链接方式;里面的数据替换是用的是
result[i].XXX; i就是进行遍历的数据 每一个不同的i从服务器json里面获取不同的数据 因为转换成数组了 就可以用来获取了;
XXX就是指的是每一个数组键,来获取里面的值 放到属性里面,就把这个html写活了!!!
加载完显示就是和上一个界面一样的!!以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
PHP之十六个魔术方法详细介绍
PHP中把以两个下划线__开头的方法称为魔术方法(Magic methods),这些方法在PHP中充当了举足轻重的作用. 魔术方法包括: __construct(),类的构造函数 __destruct(),类的析构函数 __call(),在对象中调用一个不可访问方法时调用 __callStatic(),用静态方式中调用一个不可访问方法时调用 __get(),获得一个类的成员变量时调用 __set(),设置一个类的成员变量时调用 __isset(),当对不可访问属性调用isset()或empty(
-
php将服务端的文件读出来显示在web页面实例
本篇文章的内容我将告诉你如何应用php将服务端的文件读出来显示在web页面. 现有保存在服务端的文件orders.txt,内容为: 现创建vieworder.PHP文件,将其读出并显示; <?php $DOCUMENT_ROOT =$_SERVER['DOCUMENT_ROOT']; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>客户订
-
PHP实现小偷程序实例
为什么使用"小偷程序"? 远程抓取文章资讯或商品信息是很多企业要求程序员实现的功能,也就是俗说的小偷程序.其最主要的优点是:解决了公司网编繁重的工作,大大提高了效率.只需要一运行就能快速的抓取别人网站的信息. "小偷程序"在哪里运行? "小偷程序" 应该在 Windows 下的 DOS或 Linux 下通过 PHP 命令运行为最佳,因为,网页运行会超时. 比如图(Windows 下 DOS 为例): "小偷程序"的实现 这里主
-
PHP递归获取目录内所有文件的实现方法
如下所示: /** * 递归获取文件夹内所有文件 * 返回一个TREE结构的文件系统 * @param string $dir * @param array $filter * @return array $files */ function scan_dir($dir, $filter = array()){ if(!is_dir($dir))return false; $files = array_diff(scandir($dir), array('.', '..')); if(is_ar
-
php array_pop()数组函数将数组最后一个单元弹出（出栈）
复制代码 代码如下: <?php /*函数array_pop():将数组最后一个单元弹出(出栈) * 1.语法:mixed array_pop ( array &array ) * 2.描述: 弹出并返回 array 数组的最后一个单元,并将数组 array 的长度减一.如果 array 为空(或者不是数组)将返回 NULL. * 3.注意事项: * 3.1. */ echo "****************************************************
-
PHP用户验证和标签推荐的简单使用
本文给大家讲解一些最简单的验证知识.大家可以先看下效果图,如果大家感觉还不错,请参考实现代码. 效果图 bookmark_fns.php <?php require_once('output_fns.php'); require_once('db_fns.php'); require_once('data_valid_fns.php'); require_once('url_fns.php'); require_once('user_auth_fns.php'); ?> data_valid_
-
PHP仿微信发红包领红包效果
近期项目需要在聊天的基础上新增红包功能,需求:仿微信(不含留言),但只能使用余额发红包.于是多次使用微信红包,了解各种交互界面及业务需求,如展示信息.分类(个人,群普通,群拼手气).个数限制(100).金额限制(200).过期时间(24小时)等等,然后着手开发,下面提及的基本全是提供给app端的接口,毕竟我是phper. 一.设计数据表如下 CREATE TABLE `red_packet` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `us
-
PHPCMS忘记后台密码的解决办法
什么是PHPCMS? PHPCMS是一款网站管理软件.该软件采用模块化开发,支持多种分类方式,使用它可方便实现个性化网站的设计.开发与维护.它支持众多的程序组合,可轻松实现网站平台迁移,并可广泛满足各种规模的网站需求,可靠性高,是一款具备文章.下载.图片.分类信息.影视.商城.采集.财务等众多功能的强大.易用.可扩展的优秀网站管理软件. PHPCMS后台密码忘记解决办法,本文主要是从技术角度去解决的,请细看正文. 1. 密码忘记就得先找到加密的方法了 1.1 PHPCMS密码只能重试8次,超过重
-
php array_pop 删除数组最后一个元素实例
php array_pop函数将数组最后一个单元弹出(出栈),即删除数组的最后一个元素.本文章通过php实例向大家讲解array_pop函数的使用方法. array_pop - 将数组最后一个单元弹出(出栈) 说明 mixed array_pop ( array &$array ) array_pop() 弹出并返回 array 数组的最后一个单元,并将数组 array 的长度减一.如果 array 为空(或者不是数组)将返回 NULL . 此外如果被调用不是一个数则会产生一个 Warning.
-
php数组函数序列之array_pop() - 删除数组中的最后一个元素
array_pop()定义和用法 array_pop() 函数删除数组中的最后一个元素. 语法 array_pop(array)参数 描述 array 必需.规定输入的数组参数. 例子 复制代码 代码如下: <?php $a=array("Dog","Cat","Horse"); array_pop($a); print_r($a); ?> 输出: Array ( [0] => Dog [1] => Cat )
-
php 实现一个字符串加密解密的函数实例代码
php 实现一个字符串加密解密的函数 函数代码如下: /********************************************************************* 函数名称:encrypt 函数作用:加密解密字符串 使用方法: 加密 :encrypt('str','E','nowamagic'); 解密 :encrypt('被加密过的字符串','D','nowamagic'); 参数说明: $string :需要加密解密的字符串 $operation:判断是加密还