English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. موقعك الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. نص المقال

استخدام PHP لإنشاء واجهة بين الخادم واجهة frontend

تفاعل PHP مع صفحة الويب هو وسيلة مهمة لتحقيق تفاعل موقع الويب PHP مع المستخدم. يرجى أن يبدأ الباحثون الذين يرغبون في قراءة هذا المقال في مراجعة معرفة PHP الأساسية أولاً، لأنني سأستخدم هذا اليوم، وبيع ما أتعلمه الآن. سيتم تحديث معلومات الخادم PHP الأساسية لاحقاً!

1.أولاً يجب أن يكون لديك واجهةٍ - أنا هنا استخدمت واجهةٍ بسيطة من مشروعي لشرحها! سر المشروع - لا تقم بذلك، تعرف!

كود الوجهة والواجهة

!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="[#0#]" 
                          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 متطابق، لذا لن أقوم بذكره مرة أخرى، يفهم الجميع

حسنًا، يفهم الجميع هنا؛ الآن نستخدم AJAX للتفاعل وهو كود الجافا سكربت

في الأسفل يتم إضافة كتلة من كود الجافا سكربت

<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='[#1#]' 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='[#1#]' 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); 
} 
  echo json_encode(array("code"=>402)); 
  echo json_encode($hotSale); 
}

كود الخادم يحتوي على ملفات 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); 
}

هذا تم تحديده بين فريق التطوير وفريق الخادم

ما سأقوم بشرح البيانات التي تعود عند إجراء الدخول بشكل صحيح

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 Type沙发", 
  "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 Type沙发", 
  "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;</span></p><p>ثم يتم إرسالها إلى data في html via ajax حتى لو كان هذا:</p> 

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">نجاح: function(data){ 
      var result=eval("("+data+")"); 
      alert(data);

هذا هو الدالة التي يتم تنفيذها عند نجاح AJAX، الدالة funcation()، حيث يتم الحصول على البيانات التي نحصل عليها من ملف 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='[#1#]' 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='[#1#]' 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>" 
        }

يمكنكم رؤية أن هذا هو قائمة مخصصة، وإذا أضفتوا "++" إلى كل سطر، فسيكون الجميع واضحًا، هذه هي طريقة الربط في JavaScript؛ يتم استبدال البيانات باستخدام
result[i].XXX; i هو البيانات التي يتم مرورها عبرها، وكل i المختلفة تحصل على بيانات مختلفة من json على الخادم، لأنها تم تحويلها إلى قائمة، يمكن استخدامها للحصول على البيانات;
XXX يشير إلى كل مفتاح قائمة، للحصول على القيمة الموجودة داخلها، وإذا أضفتها إلى السمة، فإنك تجعل هذا HTML حيًا!!!

عندما يتم تحميله، سيكون كما في الشاشة السابقة!! هذا هو نهاية محتوى هذا المقال، نأمل أن يكون هذا المقال مفيدًا لكم في تعلمكم، ونأمل أيضًا أن تشجعوا دليل التعليمات.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع صاحب الحقوق بالملكية، ويتم جمع المحتوى من قبل المستخدمين عبر الإنترنت بتحميله بشكل تلقائي، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفتم محتوى يشتبه في حقوق النسخ، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) للإبلاغ، وتقديم الأدلة ذات الصلة، وسيتم حذف المحتوى المزعوم الذي يشتبه في حقوق النسخ فورًا إذا تم التحقق منه;

دليل الأساسيات
أعجبك ذلك