집 > 기사 > 백엔드 개발 > PHP를 서버로 사용하여 웹 프런트 엔드 인터페이스와 상호 작용

PHP를 서버로 사용하여 웹 프런트 엔드 인터페이스와 상호 작용

墨辰丷원래의: 2018-05-31 09:39:562053검색

PHP와 웹 페이지 간의 상호 작용은 PHP 웹 사이트와 사용자 간의 상호 작용을 실현하는 중요한 수단입니다. 이 기사에서는 주로 웹 프런트 엔드 인터페이스와 상호 작용하는 서버로 PHP를 사용하는 방법을 소개합니다. 관심 있는 친구는 이를 참조할 수 있습니다.

PHP와 웹 페이지 간의 상호 작용은 PHP 웹 사이트와 사용자 간의 상호 작용을 실현하는 중요한 수단입니다. 이 글을 읽고자 하는 학자들은 PHP에 대한 기본 지식을 먼저 확인하세요. 지금 바로 배워서 판매해 보세요.

1. 먼저 PHP 서버에 대한 기본 지식이 업데이트될 예정입니다. 인터페이스를 가지려면 내 프로젝트에서 개발한 간단한 인터페이스를 사용하여 설명하세요! 프로젝트 기밀 유지 *, 이해하세요! ec72fc4597b7e4c89e397c9b9b4ca917위 코드의 li 부분에는 실제로 이러한 인터페이스가 8개 구현되어 있습니다

li 코드는 모두 동일하므로 나열하지 않겠습니다. 하나씩 이해하세요

다음은 ajax와의 상호작용을 위한 js 코드입니다. 서버 코드에는 들어오는 php 파일이 포함되어 있습니다. 데이터를 저장하는 php 파일입니다. 코드는 아래에 첨부하겠습니다. 이 간단한 서버 측 코드를 설명하겠습니다

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

이 판단은 클라이언트 코드와 사용자 모두 맞으면 데이터가 반환됩니다. 몇 초 동안 기다리지 않으면 반환됩니다.

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

이 문장은 모두가 알고 있는 키워드입니다. php.json_encode는 data.php
이것이 바로 그것입니다

<p>

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

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

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

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

이것이 funcation() 함수의 데이터를 성공적으로 얻었을 때 실행되는 것입니다. 실제로는 json 파일이지만 배열 형식으로 변환해야 합니다

94bc2ce97a0ac4bb4248b45e38f7eb2bvar result=eval("("+data+")");이 문장은 이를 우리에게 익숙한 Array의 실제 배열로 변환합니다.

그런 다음 탐색하려면 8개의 데이터 조각이 필요합니다

else{ 
  echo json_encode(array("code"=>402)); 
  echo json_encode($hotSale); 
}

result.length는 최대 길이입니다.

최종 탐색 후에는 8개의 조각이 출력되지만 어떤 사람들은 어떻게 해야 하는지 물어보곤 합니다. 서버에 의해 전달된 내용은 html에 로드됩니다. 위의 var str의 내용을 설명하겠습니다.

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

이것이 사용자 정의 배열임을 알 수 있으며 각 줄을 추가합니다. "++ "가 연결되면 이는 js의 링크 방법입니다. 내부의 데이터 교체는

result[i].XXX; i는 통과된 데이터입니다. 각각의 다른 i는 서버 json에서 검색되므로 다른 데이터를 얻는 데 사용할 수 있습니다.

XXX는 각 배열 키를 참조하여 값을 가져와서 속성에 넣은 다음 이 HTML을 작성합니다!!!

위 내용은 이 기사의 전체 내용입니다. 모두의 공부에 도움이 되기를 바랍니다.

PHP를 서버로 사용하여 웹 프런트 엔드 인터페이스와 상호 작용

관련 기사