Use PHP as the server to interact with the web front-end interface-PHP Tutorial-php.cn

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

墨辰丷

Release： 2023-03-28 15:08:01

Original

2099 people have browsed it

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.

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!

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!

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

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

<?php/** * 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); }

 "./百姓商城-百姓广场网上商城-郑州建材_郑州家具_郑州建材网_郑州装修公司-价格最低,保障质量_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

var result=eval("(" data ")");This sentence is to convert it into a real array array that we are familiar with;

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

result.length is our maximum length,

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

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!!!

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

Related recommendations:

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

PHP Decorator Pattern Usage Case Analysis

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

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!