php前后端交互多选代码,PHP前后端交互

PHP前后端交互

——PHP与HTML交互，PHP与JavaScript交互。

2016年3月3日

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

2 原理

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

PHP

Name:

E-Mail:

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"html to php,",$_GET["name"];

?>

//read from back

vara==$c->a?>;

console.log(a);

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

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中显示。

//index.php

PHP

Name:

E-Mail:

ajax

function doAjax(){

console.log("doAjax()");

//send(get)ajax data to php

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

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

console.log(data);

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

});

}

//doajax.php

$email=$_GET["name"];//fromajax

$name=$_GET["email"];//fromajax

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

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

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

echojson_encode($ret);//send to ajax

?>

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

//index.php

PHP

Name:

E-Mail:

ajax

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 "html tophp,",$_GET["name"];//get from html

?>

//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));

});

}

//doajax.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

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

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

?>