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

2024-10-10 02:09:52

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 array_pop()数组函数将数组最后一个单元弹出（出栈）

复制代码代码如下: <?php /*函数array_pop():将数组最后一个单元弹出(出栈) * 1.语法:mixed array_pop ( array &array ) * 2.描述: 弹出并返回 array 数组的最后一个单元,并将数组 array 的长度减一.如果 array 为空(或者不是数组)将返回 NULL. * 3.注意事项: * 3.1. */ echo "****************************************************
PHP仿微信发红包领红包效果

近期项目需要在聊天的基础上新增红包功能,需求:仿微信(不含留言),但只能使用余额发红包.于是多次使用微信红包,了解各种交互界面及业务需求,如展示信息.分类(个人,群普通,群拼手气).个数限制(100).金额限制(200).过期时间(24小时)等等,然后着手开发,下面提及的基本全是提供给app端的接口,毕竟我是phper. 一.设计数据表如下 CREATE TABLE `red_packet` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `us
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数组函数序列之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将服务端的文件读出来显示在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之十六个魔术方法详细介绍

PHP中把以两个下划线__开头的方法称为魔术方法(Magic methods),这些方法在PHP中充当了举足轻重的作用. 魔术方法包括: __construct(),类的构造函数 __destruct(),类的析构函数 __call(),在对象中调用一个不可访问方法时调用 __callStatic(),用静态方式中调用一个不可访问方法时调用 __get(),获得一个类的成员变量时调用 __set(),设置一个类的成员变量时调用 __isset(),当对不可访问属性调用isset()或empty(
php array_pop 删除数组最后一个元素实例

php array_pop函数将数组最后一个单元弹出(出栈),即删除数组的最后一个元素.本文章通过php实例向大家讲解array_pop函数的使用方法. array_pop - 将数组最后一个单元弹出(出栈) 说明 mixed array_pop ( array &$array ) array_pop() 弹出并返回 array 数组的最后一个单元,并将数组 array 的长度减一.如果 array 为空(或者不是数组)将返回 NULL . 此外如果被调用不是一个数则会产生一个 Warning.
php 实现一个字符串加密解密的函数实例代码

php 实现一个字符串加密解密的函数函数代码如下: /********************************************************************* 函数名称:encrypt 函数作用:加密解密字符串使用方法: 加密 :encrypt('str','E','nowamagic'); 解密 :encrypt('被加密过的字符串','D','nowamagic'); 参数说明: $string :需要加密解密的字符串 $operation:判断是加密还
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
PHPCMS忘记后台密码的解决办法

什么是PHPCMS? PHPCMS是一款网站管理软件.该软件采用模块化开发,支持多种分类方式,使用它可方便实现个性化网站的设计.开发与维护.它支持众多的程序组合,可轻松实现网站平台迁移,并可广泛满足各种规模的网站需求,可靠性高,是一款具备文章.下载.图片.分类信息.影视.商城.采集.财务等众多功能的强大.易用.可扩展的优秀网站管理软件. PHPCMS后台密码忘记解决办法,本文主要是从技术角度去解决的,请细看正文. 1. 密码忘记就得先找到加密的方法了 1.1 PHPCMS密码只能重试8次,超过重

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

相关推荐

随机推荐