English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'interazione tra PHP e le pagine web è un mezzo importante per la realizzazione dell'interazione tra il sito web PHP e gli utenti. Si prega che gli studiosi che guardano questo articolo esaminino prima le basi di PHP, perché oggi ne useremo qualcosa, impariamo e vendiamo all'istante. Successivamente, verranno aggiornate le conoscenze di base del server PHP!
1. Prima di tutto, devi avere un'interfaccia - qui sto utilizzando una semplice interfaccia di un mio progetto per spiegare! Segreto del progetto, non lo dico, capisci!
codice HTML e interfaccia
!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">Prenotazione：<b class="yd_num">44</b>pezzi</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">Il codice li sopra ha otto elementi, realizzando l'interfaccia come questa
Poiché il codice li è lo stesso, non elencherò uno per uno; capisci?
Ok, capisco tutto qui; ora è il turno di interagire con AJAX, è il codice JavaScript
Inserisci qui un blocco di codice JavaScript
<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='Vittoria Ceramica Naturale Series'><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'>Prenotazione:<b class='yd_num'>" + result[i].number + "</b>pezzi</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='Vittoria Ceramica Naturale Series'><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'>Prenotazione:<b class='yd_num'>" + result[i].number + "</b>pezzi</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>Le proprietà di alcuni ajax che tutti sanno, spiegherò brevemente: type è il metodo di trasmissione, ci sono due tipi: post e get, io uso post</p><p>url è il percorso del php del server, è l'indirizzo a cui vengono inviati i dati, data sono i dati che inviamo, quindi viene inviato al server, quindi il codice del server è il seguente codice:</p><p></p><p><pre name="code" class="php"><?php</p>/**
* Created by PhpStorm.
* User: Administrator
* Data: 2016-7-15
* Ora: 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);
}
Il codice del server che include il file php è un file php che memorizza i dati. Di seguito è riportato il codice; Spiego questo semplice codice del server
if($_POST["code"]==201 && $_POST["user"]=="admin"){
// echo json_encode(array("code"=>111)) ;
echo json_encode($hotSale);
}
Questa condizione giudica i dati inviati dal client Se code e user sono corretti, viene restituito il dato Altrimenti viene restituito
else{
echo json_encode(array("code"=>402));
echo json_encode($hotSale);
}
Questo è stato deciso con i colleghi di sviluppo e server
Ecco cosa dico quando viene restituito correttamente i dati
<pre name="code" class="php">echo json_encode($hotSale);
Questo è il echo, che è una parola chiave conosciuta in PHP, json_encode è una funzione che otteniamo i dati caricati in data.php
Questo è
<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型沙发",
"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>Questa è tutta la dati forniti dal server e poi ottenere quell'array</p><p><span style="font-family: Arial, Helvetica, sans-serif;">$hotSale;</p><p>Quindi lo trasmettiamo nel data dell'ajax del nostro html anche se questo:</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);
Questo è il funzionamento della funzione eseguita con successo con AJAX funcation() dove data ottiene il nostro array, in realtà è un file JSON, ma ha la forma di un array e quindi dobbiamo convertirlo
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">var result=eval("("+data+")"); Questa frase è quella che lo trasforma in un array che conosciamo bene;
Poi, dobbiamo iterare attraverso otto dati
<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='Vittoria Ceramica Naturale Series'><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'>Prenotazione:<b class='yd_num'>" + result[i].number + "</b>pezzi</span><span class='bx_price'>￥" + result[i].Nprice + "</span><span class='store_price'>￥" + result[i].Oprice + "</span></div> </li>"
}
result.length rappresenta la nostra lunghezza massima
Dopo aver effettuato l'ultima iterazione, verranno visualizzati otto elementi; tuttavia, qualcuno potrebbe chiedere come si carica l'array ricevuto dal server in HTML; di seguito, spieghiamo il contenuto di 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='Vittoria Ceramica Naturale Series'><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'>Prenotazione:<b class='yd_num'>" + result[i].number + "</b>pezzi</span><span class='bx_price'>￥" + result[i].Nprice + "</span><span class='store_price'>￥" + result[i].Oprice + "</span></div> </li>"
}
Come potete vedere, questo è un array personalizzato e ogni riga viene aggiunta con "++" per collegare, tutti capiscono che questo è il modo di collegamento in JavaScript; i dati sostituiti utilizzano
result[i].XXX; i è il dato di scansione, ogni diverso i ottiene dati diversi dal json del server. Poiché è stato convertito in un array, può essere utilizzato per ottenere i dati;
XXX si riferisce a ogni chiave dell'array, per ottenere il valore all'interno e metterlo nell'attributo, così si rende vivace questo html!!!
Visualizzato dopo il caricamento è esattamente come l'interfaccia precedente! Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento, e ti prego di supportare fortemente il tutorial di urla.
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare un'e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web rimuoverà immediatamente il contenuto sospetto di violazione del copyright.