phpを使用してサーバーとウェブフロントエンドのインタラクションを行う

PHPとWebページのインタラクションは、PHPウェブサイトとユーザーのインタラクションを実現する重要な手段です。本記事を確認する学者は、まず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="[#0#]" 
                          src="http://image01.baixingstatic.com/system/56945f870cfe00463b0acfe04c9d9be3e0a3.jpg"></a> 
        </ul> 
        <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></ul> 
      </li> 
     </li> 
  </ul> 
</ul>

　</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:{201"code":" 
      ", 
    "user":"admin" 
    }, 
      var result=eval("("+data+")"); 
      alert(data); 
      success:function(data){++){ 
        for(var i=0;i<result.length;i+1if ((i4){ 
          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 + 
              "<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>" 
        } 
        right: 0px' >" 
//       $(" .index_hot_sale #hot_sale").append(str); 
//        var oneTitle = result[i].title;+$(".hot_sale_ul li:eq("+i 
//        var oneTitle = result[i].title;+$(".hot_sale_ul li:eq("+i 
      } 
    } 
  >) a").attr("title",result[i].title); 
</script>

<p></pre><p>上記のAJAXの属性は皆さんもよく理解しています。簡単に説明します。typeは送信方法で、postとgetの2種類があります。私は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); 
}

サーバーのコードが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:-type:text/html;charset=utf-8-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配列に変換します;

次に、8つのデータを巡回する必要があります

<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は最大長さです

最後に全てのループが終わると、8つのエントリが表示されます；ただし、誰かが尋ねるかもしれません、どうやってサーバーから渡された配列を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>" 
        }

皆さんは自分で定義した配列がこれです。各行に"を追加して、++連結して、皆さんは明らかに、これはjsでのリンク方法であり、データの置き換えは以下で行われます；
result[i].XXX; iはデータを巡回するデータであり、各異なるiはサーバーのjsonから異なるデータを取得します。配列に変換されたため、取得することができます；
XXXは各配列のキーを指し、その値を属性に格納すると、このHTMLが動的に書かれます！！！

読み込んだ後に表示されるのは前の画面と同じです！これが本文の全てです。皆様の学習に役立つことを願っています。また、呐喊チュートリアルを多くご支援いただけますように。

声明：本内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードしたものであり、当サイトは所有権を持ちません。人工編集は行われていません。著作権侵害の疑いがある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メール送信時、#を@に変更してください。報告をいただき、関連証拠を提供いただければ、当サイトは即座に侵害疑いのコンテンツを削除します。）

基本教程