文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > 后端开发 > php教程 > 正文

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

墨辰丷
发布： 2018-05-31 09:39:56
原创
2185人浏览过
<p>php与web页面交互是实现php网站与用户交互的重要手段。本篇文章主要介绍了利用php做服务器和web前端的界面进行交互，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

<p>PHP与Web页面交互是实现PHP网站与用户交互的重要手段。希望查看本篇文章的学者首先查看一下PHP的基础知识,因为今天用到这个东西,现学现卖吧.后续会更新php服务器的基础知识!

<p>1.首先你要有一个界面   我这里利用我项目开发的一个简单界面截取下来进行讲解!项目机密  请勿**,你懂得!

<p>html代码和界面

<!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=" ">@@##@@</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>

<p>立即学习“PHP免费学习笔记（深入）”；

<p> 
上面的代码li部分其实是有八个 实现的是这样的界面<br/></p><p>@@##@@</p><p>因为li代码都是一样的 所以就不一一列举了 大家明白就行了<br/></p><p>ok 这里的都明白;下面就是用ajax进行交互 就是js的代码<br/></p><p>在下面进行加入一个js的代码块<br/></p><p class="jb51code"></p><pre class="brush: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' >" + 
              "<p class='pic'><a style='width:260px;height:172px;' href='" + result[i].titleURL + "' title='维多利陶瓷 自然石系列'>@@##@@</a></p>" + 
              "<p class='tit'><a href='" + result[i].titleURL + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
              "<p 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></p> </li>" 
 
        } 
        else { 
// 
          var str = "<li class='hot_sale_li left'style='margin-right: 0px' >" + 
              "<p class='pic'><a style='width:260px;height:172px;' href='" + result[i].titleURL + "' title='维多利陶瓷 自然石系列'>@@##@@</a></p>" + 
              "<p class='tit'><a href='" + result[i].titleURL + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
              "<p 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></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>立即学习“PHP免费学习笔记（深入）”；

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

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

<p>

<p>立即学习“PHP免费学习笔记（深入）”；

<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); 
}
登录后复制

<p>

<p>立即学习“PHP免费学习笔记（深入）”；

<p>服务器的代码 include进来的php文件就是存储数据的一个php文件下面会附上代码;我解释一下这个简单的服务器端的代码

if($_POST["code"]==201 && $_POST["user"]=="admin"){ 
//  echo json_encode(array("code"=>111)) ; 
  echo json_encode($hotSale); 
}
登录后复制
<p>

<p>立即学习“PHP免费学习笔记（深入）”；

<p>这个判断就是对客户端那边发过来的数据进行的判断  如果code和user都正确  则给你返回数据  如果不等几返回

else{ 
  echo json_encode(array("code"=>402)); 
  echo json_encode($hotSale); 
}
登录后复制
<p>

<p>立即学习“PHP免费学习笔记（深入）”；

<p>这是在开发中和服务器端的同事商量定下来的

<p>下面我说一下正确的时候返回来的数据

<pre name="code" class="php">echo json_encode($hotSale);
登录后复制
<p>

<p>立即学习“PHP免费学习笔记（深入）”；

<p>就是这句 echo大家都知道是php里面的关键字 ,json_encode就是获取我们加载 data.php
就是这个

 "./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_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里面即使这个:
登录后复制
<p>

<p>立即学习“PHP免费学习笔记（深入）”；

<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>立即学习“PHP免费学习笔记（深入）”；

<p>这个就是ajax获取成功的时候执行的函数funcation()里面的data就获取到了我们那个数组,其实他是json文件,只是像数组格式我们还要进行转换
var result=eval("("+data+")");这句话就是把他转换成真正我们熟悉的array数组;
<p>然后就是我们要八条数据进行遍历
for(var i=0;i@@##@@
" + 
              "
" + result[i].title + "
" + 
              "
预订：" + result[i].number + "件￥" + result[i].Nprice + "￥" + result[i].Oprice + "
 " 
 
        }
登录后复制

<p>

<p>立即学习“PHP免费学习笔记（深入）”；

<p>result.length就是我们的最大长度了,

<p>最后遍历之后就会输出八条了;不过肯定有人问 你怎么把服务器传过来的数组加载到html中的;下面对上面的那个var str里面的内容讲解一下:

<pre name="code" class="html" style="font-family: Arial, Helvetica, sans-serif;">var str = "<li class='hot_sale_li left' >" + 
              "<p class='pic'><a style='width:260px;height:172px;' href='" + result[i].titleURL + "' title='维多利陶瓷 自然石系列'>@@##@@</a></p>" + 
              "<p class='tit'><a href='" + result[i].titleURL + "' title='" + result[i].title + "'>" + result[i].title + "</a></p>" + 
              "<p 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></p> </li>" 
 
        }
登录后复制
<p>

<p>立即学习“PHP免费学习笔记（深入）”；

<p>大家可以看到这是一个自定义的数组然后把每一行都加一个"++"连起来 大家都明白,这是js中的链接方式;里面的数据替换是用的是
result[i].XXX; i就是进行遍历的数据 每一个不同的i从服务器json里面获取不同的数据 因为转换成数组了 就可以用来获取了;
XXX就是指的是每一个数组键,来获取里面的值 放到属性里面,就把这个html写活了!!!

<p>以上就是本文的全部内容，希望对大家的学习有所帮助。

<p>相关推荐：

<p>PHP使用星号替代用户名手机与邮箱部分字符

<p>PHP装饰器模式使用案例分析

<p>PHP多线程模拟实现秒杀抢单活动（附代码）

<p>

<p>立即学习“PHP免费学习笔记（深入）”；

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

以上就是利用php做服务器和web前端的界面进行交互的详细内容，更多请关注php中文网其它相关文章！

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：利用php实现一周之内自动登录存储机制 下一篇：php将服务端的文件读出来显示在web页面实例
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
PHP如何调用HTMLHint检查 HTMLHint调用指南快速检测HTML代码 直接调用HTMLHint能有效提升PHP生成HTML代码的质量和可维护性。主要方法有两种：1.通过命令行执行，2.使用PHP扩展（如存在）。推荐使用命令行方式，需先安装Node.js和npm，再全局安装HTMLHint：npminstall-ghtmlhint。接着在项目根目录创建.htmlhintrc配置文件以定义规则，例如启用标签小写、属性小写、双引号等规则。PHP中可通过exec()函数调用HTMLHint，示例脚本创建临时文件写入HTML内容，执行命令并处理输出结果。错误信息可遍历显示，
2025-06-21 09:30:02
671
PHP怎么实现数据自动校验 数据自动校验的3种实现方案 PHP实现数据自动校验主要有三种方式：1.使用PHP内置函数，如filter_var和is_numeric，适用于简单验证，优点是无需额外依赖，但功能有限；2.使用第三方验证库如Respect\Validation，提供丰富的规则和扩展性，代码可读性高，但增加项目复杂度；3.自定义验证规则，通过编写验证类实现灵活逻辑，适合复杂需求，但开发成本较高。选择方案需根据项目规模和技术要求权衡：小型项目推荐内置函数，中型项目适合第三方库，大型项目可定制开发。此外，还需结合数据过滤确保安全性，并在验证失败时
2025-06-21 08:57:02
687
PHP如何调用F#程序 通过.NET互操作调用F#代码的方法 PHP可以通过.NET互操作调用F#程序，具体步骤为：首先将F#代码编译成.NET程序集（DLL），然后在PHP中使用COM或.NET扩展加载并调用该程序集。1.编译F#代码为DLL：安装.NETSDK，创建F#项目并设置输出类型为“Library”，编写F#代码后通过dotnetbuild命令生成DLL文件；2.使用COM方式在PHP中调用：通过regasm.exe注册DLL为COM组件，生成TLB文件，随后在PHP中使用newCOM()函数实例化对象并调用方法；3.使用.NET扩展方式调用：
2025-06-21 08:27:02
356
PHP怎么实现文件批量添加水印 批量水印添加方法详解 PHP实现文件批量添加水印需遍历目录、加载图片、叠加水印并保存，常见问题包括内存溢出、水印位置计算、中文乱码等。1.使用glob()函数遍历图片文件；2.根据文件类型加载对应图片资源；3.加载水印图片或生成文字水印；4.计算水印位置（如右下角）；5.使用imagecopy()或imagettftext()叠加水印；6.保存处理后的图片至指定目录；7.及时调用imagedestroy()释放资源；8.可调整memory_limit参数或使用Imagick扩展优化内存管理；9.水印位置可通过百分比、
2025-06-21 08:21:02
162
PHP自动加载：spl_autoload使用 PHP的自动加载机制通过spl_autoload解决未定义类的加载问题。其核心是使用spl_autoload_register注册自定义加载函数，当使用未定义类时按注册顺序调用这些函数加载文件。相比手动包含文件，它避免了繁琐操作并支持命名空间映射。实现时需传入可调用对象，如匿名函数或类方法，并将类名转换为对应文件路径。良好的命名空间与目录结构对应是关键，例如MyProject\Database对应MyProject/Database/。Composer简化了自动加载配置，通过composer.j
2025-06-20 23:54:02
525
PHP如何调用Mercurial命令 4个常用Hg命令调用方法 在PHP中调用Mercurial命令的首选方法是使用shell_exec()、exec()或proc_open()函数，具体选择取决于需求。1.shell_exec()最简单，适合直接执行命令并获取输出，但无法处理返回码；2.exec()可获取返回码，适合需要判断执行状态的场景；3.proc_open()最灵活，支持实时读取输出和错误流，适合复杂交互场景。安全方面必须避免命令注入，应使用escapeshellarg()转义用户输入，并限制可执行命令范围。常用命令如hgstatus、hgadd、h
2025-06-20 23:42:02
491
PHP数据库连接：MySQL操作指南 PHP连接MySQL数据库主要通过mysqli或PDO扩展实现。1.mysqli提供面向对象和过程两种方式，示例代码展示了如何创建连接、执行查询及处理结果；2.PDO使用预处理语句提升安全性，并支持多种数据库；3.安全方面需防范SQL注入，应使用参数绑定而非拼接用户输入；4.性能优化包括启用持久连接、索引与查询优化、缓存结果及使用连接池；5.乱码问题可通过统一字符集（如UTF-8）解决；6.错误处理应结合try-catch捕获异常并记录日志，避免暴露敏感信息。
2025-06-20 22:45:02
836
PHP怎么实现数据自动分析 数据自动分析功能实现步骤 PHP实现数据自动分析的关键在于整合合适的工具和算法，具体步骤包括：1.数据收集与存储，通过数据库扩展或文件操作函数获取数据并选择合适存储方式；2.数据清洗与转换，处理错误、缺失或不一致信息并转换为适合分析的格式；3.数据分析，使用内置函数或第三方库如PHP-ML进行统计或机器学习分析；4.数据可视化，借助pChart或GoogleChartsAPI生成图表展示结果。此外，需根据数据量、复杂度、性能及开发维护成本选择合适工具，同时通过优化查询、缓存、并行处理等方式提升大数据分析效率，并将分析结果
2025-06-20 22:18:02
644
PHP如何调用Asciidoctor转换 Asciidoctor调用教程快速转换文档格式 PHP调用Asciidoctor的核心在于通过exec()或shell_exec()函数执行Asciidoctor命令，实现将Asciidoc文档转换为HTML等格式。1.确保环境正确配置：安装Asciidoctor和Ruby环境，并确认Asciidoctor路径；2.PHP代码中使用escapeshellcmd()和exec()执行转换命令，并处理返回值以判断执行是否成功；3.注意权限问题，确保PHP进程有执行Asciidoctor及读写相关文件的权限；4.处理中文路径或文件名时，使用esca
2025-06-20 21:57:02
633
PHP怎样解析CSV带BOM文件 CSV文件BOM头处理技巧分享 PHP解析带BOM的CSV文件需先识别并移除BOM以避免解析错误。1.判断是否包含BOM的方法是读取文件前3个字节并与特征码比较，如UTF-8的BOM为\xEF\xBB\xBF；2.移除BOM可通过读取文件内容并截取去掉前3字节后的内容再写回文件实现；3.处理大文件时应采用流式处理，使用fopen逐行读取并配合fgets和str_getcsv函数降低内存占用；4.此外还可通过指定编码、检查分隔符、处理换行符、使用专业库、验证数据类型、处理空值、记录日志等方式避免解析错误，确保文件格式和编码正确性
2025-06-20 21:54:02
570
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部