您的位置：首页 > 编程语言 > PHP开发

PHP前后端交互

2016-03-03 13:58 567 查看

PHP前后端交互
——PHP与HTML交互，PHP与JavaScript交互。
sf2gis@163.com
2016年3月3日

1 目标：PHP与前端的HTML和JavaScript进行数据传递。

2 原理

参考：http://www.jb51.net/article/32701.htm

http://www.cnblogs.com/GarfieldTom/archive/2012/11/02/2751105.html

http://www.th7.cn/Program/php/201502/395383.shtml

2.1 PHP获取前端数据：通过表单提交的POST或GET完成。

2.2 PHP向前端输出数据：通过直接输出（由解析器完成）到HTML完成。

2.3 使用AJAX可以完成部分刷新，从而具有动态效果。

3 流程：PHP直接将后端数据传递到HTML，PHP读取前端GET数据，JavaScript直接读取PHP后端数据。

3.1.1PHP直接将后端数据传递到HTML

echo "php to html,c->a=",$c->a;

3.1.2PHP读取前端GET数据

echo"</br>html to php,",$_GET["name"];

3.1.3JavaScript直接读取PHP后端数据。

      var a=<?=$c->a?>;

      console.log(a);

      document.getElementById("email").value="php tojs="+a;

3.1.4示例：前后端交互PHP与HTML，JavaScript交互。

//index.php

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

      <title>PHP</title>

</head>

<body>

      <form action="index.php"method="get"/>

           Name:<input type="text"name="name"/></br>

           E-Mail:<input id="email"type="email" name="email"/></br>

           <input type="submit"/></br>

      </from>

<?php

      class Base{

           public $a;

           function showA(){

                 echo "a=",$this->a;

           }

      }



      $c=new Base();

      $c->a=18;

      echo"php to html,c->a=",$c->a;

      //get from html

      echo"</br>html to php,",$_GET["name"];

?>

<scripttype="text/javascript">

      //read from back

      vara=<?=$c->a?>;

      console.log(a);

      document.getElementById("email").value="php tojs="+a;

</script>

</body>

</html>

4 方法：PHP使用AJAX进行动态交互

4.1 目标：前端通过AJAX与PHP交互，实现局部刷新。

4.2 原理：AJAX通过HTTP请求与PHP交互，局部刷新。

4.3 流程：前端构建AJAX请求与结果处理，后端请求HTTP请求并处理数据，返回给前端AJAX回调处理。

4.3.1前端构建AJAX请求（GET），发送前端数据。

           $.get("http://localhost/doajax.php",{name: $("#name").val(), email:$("#email").val()},function(data,status){

                 console.log("success="+status);

                 console.log(data);

                 $("#email").val(data);

           });

4.3.2后端接受GET请求，解析数据。

$email=$_GET["name"];//from ajax

$name=$_GET["email"];//from ajax

4.3.3后端处理数据后返回JSON数据给前端。

$ret=array("ajax"=>$ajax,"result"=>$result);

echojson_encode($ret);//send to ajax

4.3.4前端回调处理后端结果

           function(data,status){

                 console.log("success="+status);

                 console.log(data);

                 $("#email").val(data);

           }

4.3.5示例：前端发送用户输入数据给后端，后端处理完成后在EMAIL中显示。

5 示例：HTML，JS，AJAX交互。

//index.php

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

      <title>PHP</title>

      <script type="text/javascript"src="jquery-1.11.3.js"></script>

</head>

<body>

      <form action="class.php" method="get"/>

           Name:<input id="name" type="text"name="name" style="width:300px"/></br>

           E-Mail:<input id="email"type="email" name="email" style="width:300px"/></br>

           <input type="submit"/> </br>

      </from>

      <button id="ajax"onclick="doAjax()">ajax</button></br>

<?php

      class Base{

           public $a;

           function showA($name,$email){

                 echo"showA():",$this->a,",name=",$name,",email=",$email;

           }

      }

      $c=new Base();

      $c->a=18;//used by javascript

      echo "</br>html tophp,",$_GET["name"];//get from html

?>

<scripttype="text/javascript">

      //read from php

      var a=<?=$c->a?>;

      console.log(a);

      document.getElementById("email").value="php tojs="+a;



      function doAjax(){

           console.log("doAjax()");

           $.get("http://localhost/doajax.php",{ name:$("#name").val(), email:$("#email").val()},function(data,status){

                 console.log("success="+status);

                 console.log(data);

                 console.log($("#email").val(data));

           });

      }

</script>

</body>

</html>

//doajax.php

<?php

      $email=$_GET["name"];//from ajax

      $name=$_GET["email"];//from ajax

      $ajax="php get(fromajax)=".$name.",".$email;

      $result="to ajax="."this is from php";

      $ret=array("ajax"=>$ajax,"result"=>$result);

      echo json_encode($ret);//send to ajax

?>

//class.php

<?php

      class Base{

           public $a;

           function showA($name,$email){

                 echo "showA():",$this->a,",name=",$name,",email=",$email;

           }

      }



      //get

      $name=$_GET["name"];

      $email=$_GET["email"];



      //return

      $c=new Base();

      $c->a=18;

      echo "php to html</br>";

      $c->showA($name,$email);

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： PHP AJAX JavaScript HTML

相关文章推荐

新的分享

章节导航