利用php做服务器和web前端的界面进行交互(简单易懂篇)

希望查看本篇文章的学者首先查看一下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写活了!!!

加载完显示就是和上一个界面一样的!!

可能我说的大家有的不懂, 希望大家提意见或者又不懂的下面留言,我会尽力讲解的 !

致谢!!!

时间： 2024-10-13 16:50:25

利用php做服务器和web前端的界面进行交互(简单易懂篇)的相关文章

web 前端转盘界面

http://www.cnblogs.com/arfeizhang/p/turntable.html "如果有个做转盘的需求,你准备怎么做?设计师只会提供一个转盘的图片,其余都需要你完成,不能用框架和类库." "这个转盘没有惯性的需求,只要求在手机上,用手指拖转盘,能让转盘跟随手指转起来即可." 这是我在面试前端开发人员时,经常会问到的一道题.转盘是类似上图的样子. 博主之前在M公司和C公司的时候,经常用这题面试移动前端开发工程师.M公司的产品和设计是美国团队,在个

web前端知识大纲：系列一 js篇

web前端庞大而复杂的知识体系的组成:html.css和 javascript 一.js 1.基础语法 Javascript 基础语法包括:变量声明.数据类型.函数.控制语句.内置对象等. 在ES5 中,变量声明有两种方式,分别是 var 和 function ,var用于声明普通的变量,接收任意类型,function用于声明函数.另外,ES6 新增了 let.const.import 和 class等四个命令,分别用以声明普通变量.静态变量.模块和

web前端知识大纲：系列三 html篇

web前端庞大而复杂的知识体系的组成:html.css和 javascript 三.HTML 1.BOM BOM 是 Browser Object Model的缩写,即浏览器对象模型,当一个浏览器页面初始化时,会在内存创建一个全局的对象,用以描述当前窗口的属性和状态,这个全局对象被称为浏览器对象模型,即BOM.BOM的核心对象就是window,window对象也是BOM的顶级对象,其中包含了浏览器的 6个核心模块: document -即文档对象,渲染引擎在解析HTML代码时,会为每一个元素生成

Web 前端开发学习之路（入门篇）

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝以下引用知乎 @李路的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

web前端知识大纲：系列二 css篇

web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选择器.ID选择器.后代选择器.群组选择器.伪类选择器(before/after).兄弟选择器(+~).属性选择器等等. 2.CSS Reset HTML标签在不设置任何样式的情况下,也会有一个默认的CSS样式,而不同内核浏览器对于这个默认值的设置则不尽相同,这样可能会导致同一套代码在不同浏览器上的显

Redis官网——如何利用Redis做服务器集群的分布式锁

链接:http://redis.io/topics/distlock 原理很简单,一段时间内轮询加锁的key 重点,不同语言的开源实现 Before describing the algorithm, here are a few links to implementations already available that can be used for reference. Redlock-rb (Ruby 实现). There is also a fork of Redlock-rb th

【WEB前端开发最佳实践系列】JavaScript篇

一.养成良好的编码习惯,提高可维护性 1.避免定义全局变量和函数,解决全局变量而导致的代码"污染"最简单的额方法就是把变量和方法封装在一个变量对象上,使其变成对象的属性: 1 var myCurrentAction = { 2 length : 0 , 3 init : function(){}, 4 action : function(){} 5 } 还可以将全局的变量包含在一个局部作用域中,然后在这个作用域中完成这些变量的定义以及变量使用的逻辑: 1 (function(){ 2

什么是Web前端，Web前端是做什么的？

什么是Web前端 Web前端,顾名思义是来做Web的前端的.而Web前端开发应该就是来开发基于Web前端的相关应用的或者说是来开发前端的.那么,前端又是什么呢?我们这里所说的前端泛指Web前端,也就是在Web应用中用户可以看得见碰得着的东西. 前端开发,顾名思义就是来开发Web中用户能够直接接触到东西的.那前端开发主要做哪些细节内容,其相关的职责以及职位又有哪些呢,又或者现在的前端在企业中是一种怎样的地位呢,下面我们将一起研究和分析这些问题. Web前端是做什么的 Web前端,主要是用来开发用户

web前端入坑第四篇：你还在用 jQuery？

web前端入坑第四篇:你还在用 jQuery? 大妈都这么努力,我们有几个人回家还看书的? 先来补齐[web前端入坑系列]前三篇的连接web前端入坑系列:点击标题进入第一篇: web 前端入坑第一篇:web前端到底是什么?有前途吗第二篇: web前端入坑第二篇:web前端到底怎么学?干货资料!第三篇:web前端入坑第三篇 | 一条"不归路" - 学习路线! 再说这个话题之前,我们先来扫盲普及一下 [jquery] 到底是什么以及它火爆将近十年的重要原因. [ 重新认识 - Jquery