Community Learn Tools Library Leisure
search
English
Home > Backend Development > PHP Tutorial > Use PHP as the server to interact with the web front-end interface

Use PHP as the server to interact with the web front-end interface

墨辰丷
Release： 2023-03-28 15:08:01
Original
2157 people have browsed it
<p>The interaction between PHP and Web pages is an important means to realize the interaction between PHP websites and users. This article mainly introduces the use of PHP as a server to interact with the web front-end interface. It has certain reference value. Interested friends can refer to it.

<p>The interaction between PHP and Web pages is an important means to realize the interaction between PHP websites and users. I hope that scholars who read this article will first check out the basic knowledge of PHP, because I will use this thing today, so learn it now and sell it now. The basic knowledge of the PHP server will be updated later!

<p>1. First of all, you There needs to be an interface. Here I will use a simple interface developed by my project to explain it! Project confidentiality, please do not **, you understand!

<p>htmlcode and interface

<!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=" "><img style="width:260px;height:172px;" alt="维多利陶瓷 自然石系列" 
                          src="http://image01.baixingstatic.com/system/56945f870cfe00463b0acfe04c9d9be3e0a3.jpg"></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>
Copy after login
<p>

<p> 
The li part of the code above actually has eight implementations of this interface. <br/></p><p><img src="https://img.php.cn/upload/article/000/192/893/2f9db835a2fedc2d99f37ea68e51ed01-0.png" alt=""/></p><p>Because the li codes are all the same, I won’t list them one by one. Just everyone understands. <br/></p><p>ok Everyone here understands ;The following is the js code for interaction using ajax<br/></p><p>Add a js code block below<br/></p><p class="jb51code"></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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=&#39;hot_sale_li left&#39; >" + 
              "<p class=&#39;pic&#39;><a style=&#39;width:260px;height:172px;&#39; href=&#39;" + result[i].titleURL + "&#39; title=&#39;维多利陶瓷 自然石系列&#39;><img style=&#39;width:260px;height:172px;&#39; alt=&#39;" + result[i].title + "&#39; src=&#39;" + result[i].imgURL + "&#39; /></a></p>" + 
              "<p class=&#39;tit&#39;><a href=&#39;" + result[i].titleURL + "&#39; title=&#39;" + result[i].title + "&#39;>" + result[i].title + "</a></p>" + 
              "<p class=&#39;price&#39;><span class=&#39;right&#39;>预订：<b class=&#39;yd_num&#39;>" + result[i].number + "</b>件</span><span class=&#39;bx_price&#39;>￥" + result[i].Nprice + "</span><span class=&#39;store_price&#39;>￥" + result[i].Oprice + "</span></p> </li>" 
 
        } 
        else { 
// 
          var str = "<li class=&#39;hot_sale_li left&#39;style=&#39;margin-right: 0px&#39; >" + 
              "<p class=&#39;pic&#39;><a style=&#39;width:260px;height:172px;&#39; href=&#39;" + result[i].titleURL + "&#39; title=&#39;维多利陶瓷 自然石系列&#39;><img style=&#39;width:260px;height:172px;&#39; alt=&#39;" + result[i].title + "&#39; src=&#39;" + result[i].imgURL + "&#39; /></a></p>" + 
              "<p class=&#39;tit&#39;><a href=&#39;" + result[i].titleURL + "&#39; title=&#39;" + result[i].title + "&#39;>" + result[i].title + "</a></p>" + 
              "<p class=&#39;price&#39;><span class=&#39;right&#39;>预订：<b class=&#39;yd_num&#39;>" + result[i].number + "</b>件</span><span class=&#39;bx_price&#39;>￥" + result[i].Nprice + "</span><span class=&#39;store_price&#39;>￥" + 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>
Copy after login
<p>

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

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

<p>

<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); 
}
Copy after login
<p>

<p>The php file included by the server code is a php file that stores data. The code will be attached below; let me explain this simple server-side code

if($_POST["code"]==201 && $_POST["user"]=="admin"){ 
//  echo json_encode(array("code"=>111)) ; 
  echo json_encode($hotSale); 
}
Copy after login
<p>

<p>This judgment is based on the data sent from the client. If the code and user are correct, the data will be returned to you. If not, return 

else{ 
  echo json_encode(array("code"=>402)); 
  echo json_encode($hotSale); 
}
Copy after login
<p>

<p>This was decided upon during development with colleagues on the server side

<p> Let me talk about the correct time to return The data

<pre name="code" class="php">echo json_encode($hotSale);
Copy after login
<p>

<p> is the sentence echo. Everyone knows that it is a keyword in php. json_encode is to get us to load data.php
is This

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

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">success:function(data){ 
      var result=eval("("+data+")"); 
      alert(data);
Copy after login
<p>

<p>This is inside the function funcation() that is executed when ajax is successfully obtained. The data of our array is obtained. In fact, it is a json file, but we still need to convert it to the array format.
< /span>
var result=eval("(" data ")");This sentence is to convert it into a real array array that we are familiar with;
 
<p>Then we need eight pieces of data to traverse
for(var i=0;i'"
" + 
              "
" + result[i].title + "
" + 
              "
预订：" + result[i].number + "件￥" + result[i].Nprice + "￥" + result[i].Oprice + "
 " 
 
        }
Copy after login
<p>
<p>result.length is our maximum length,
<p>After the final traversal, eight items will be output; but someone must ask you how to load the array passed from the server into HTML; let’s explain the content in the var str above: 
<pre name="code" class="html" style="font-family: Arial, Helvetica, sans-serif;">var str = "<li class=&#39;hot_sale_li left&#39; >" + 
              "<p class=&#39;pic&#39;><a style=&#39;width:260px;height:172px;&#39; href=&#39;" + result[i].titleURL + "&#39; title=&#39;维多利陶瓷 自然石系列&#39;><img style=&#39;width:260px;height:172px;&#39; alt=&#39;" + result[i].title + "&#39; src=&#39;" + result[i].imgURL + "&#39; /></a></p>" + 
              "<p class=&#39;tit&#39;><a href=&#39;" + result[i].titleURL + "&#39; title=&#39;" + result[i].title + "&#39;>" + result[i].title + "</a></p>" + 
              "<p class=&#39;price&#39;><span class=&#39;right&#39;>预订：<b class=&#39;yd_num&#39;>" + result[i].number + "</b>件</span><span class=&#39;bx_price&#39;>￥" + result[i].Nprice + "</span><span class=&#39;store_price&#39;>￥" + result[i].Oprice + "</span></p> </li>" 
 
        }
Copy after login
<p>

<p>You can see that this is a custom array and then add a "" to each line. Everyone understands that this is a link in js Method; the data replacement inside is 
result[i].XXX; i is the traversed data. Each different i gets different data from the server json because it can be used to obtain it after it is converted into an array. ;
XXX refers to each array key, to get the value inside and put it into the attribute, and then write this html!!!

<p>The above is the entire content of this article, I hope it will be helpful to everyone's study. 

<p>

<p>Related recommendations: 

<p>PHP uses asterisks to replace some characters in the username, mobile phone and email 

<p>PHP Decorator Pattern Usage Case Analysis

<p>PHP multi-thread simulation to implement flash sales and order grabbing activities (with code)

<p>


The above is the detailed content of Use PHP as the server to interact with the web front-end interface. For more information, please follow other related articles on the PHP Chinese website!
Related labels：
php web server
source：php.cn
Previous article：Use PHP to realize automatic login storage mechanism within a week Next article：PHP reads the server-side file and displays it on the web page instance
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
PHP arrays obtained from URL parameters do not behave as expected I have a URL parameter that contains the category ID and I want to treat it as an array li...
From 2024-04-06 22:09:02
0
1
1428
Where should I place CustomLog directive in apache I'm using php:7.2-apachedocker. I need to disable health check url login access log. Based...
From 2024-04-06 22:03:59
0
1
990
What is the format of the variables in the return value? I am a new learner of php. I found a piece of code: if($x<time()){return[false,'error']...
From 2024-04-06 21:55:20
0
1
778
Problems encountered when using opentbs to generate odt files: values ​​of the same key are displayed in the same row instead of separate columns. I'm using a library called OpenTbs to create odt using PHP, I'm using it because columns a...
From 2024-04-06 20:18:18
0
1
483
Group MySQL results by ID for looping over I have a table with flight data in mysql. I'm writing a php code that will group and displ...
From 2024-04-06 17:27:56
0
1
406
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template