php 表单变量 不显示_PHP实现没有数据库提交form表单到后台并且显示出数据列表（Vuejs和Element-UI前端设计表单）...

1.情境：如果你新建了个网站，却没有数据库服务器，如何把你的表单信息，提交到服务端后台，收集数据。

2.思路：如果用传统的form action 提交到一个form.php页面，此时只能存储一次数据，再次提交会覆盖之前的数据。

第一种方法：此时考虑新建一个文件可以存放数据。txt文件可以存储数据，json文件也可以存储数据，此案例采用把收集到的数据为数组格式，直接存入php文件中，并在另一个文件中读取存入的数组。

异步提交form表单数据，使用$ajax

表单样式和数据呈现表单：

1.使用Vuejs和Element-UI组件设计表单验证

>

>

提交

//此时表单验证的一些设定

//创建根实例,使用vuejs和Element-UI

newVue({

el:'#app',

data() {return{

options: [{

value:'CustomerRepresentative',

label:'Customer Representative'}, {

value:'RetentionRepresentative',

label:'Retention Representative'}, {

value:'HumanResources',

label:'HumanResources'}],default:'CustomerRepresentative',

ruleForm: {

name:'',

email:'',

phone:'',

position:'CustomerRepresentative',

},

rules: {

name: [

{ required:true, message:'Please enter your name and surname *', trigger:'blur'},

],

email:[

{ required:true, message:'Please enter your email *', trigger:'blur'},

{ type:'email', message:'Please enter your correct email *', trigger: ['blur','change'] }

],

phone:[

{ required:true, message:'Please enter your phone *', trigger:'blur'},

]

},

position: [

{ required:true, message:'请选择活动区域', trigger:'change'}

],

}

},

创建form表单

2。收集表单数据，并使用formData，使用Jquery的ajax提交数据给新的文件

register:function() {/**date**/

vardate= newDate();varseperator1= "-";//var seperator2 = ":";

varmonth=date.getMonth()+ 1;varstrDate=date.getDate();if(month>= 1 &&month<= 9) {

month= "0" +month;

}if(strDate>= 0 &&strDate<= 9) {

strDate= "0" +strDate;

}//时间格式为YY-MM-DD HH:mm:ss

varcurrentdate=date.getFullYear()+seperator1+month+seperator1+strDate//+ " " + date.getHours() + seperator2 + date.getMinutes()

//+ seperator2 + date.getSeconds();

$('#inittime').val(currentdate);

let data=this.ruleForm;

let formData=newFormData();

formData.append('name',data.name);

formData.append('email',data.email);

formData.append('phone',data.phone);

formData.append('position',data.position);

formData.append('submitdate',currentdate);//console.log(formData.get('submitdate'));

$.ajax({

url:"form.php",

type:'post',

cache:false,

processData:false,

contentType:false,

data:formData,

success:function(msg){

alert('Thanks,Your information has submitted');//console.log(msg);

//$("#result").append("你的名字是:"+msg.name+"");

}

});

}

},

定义FormData数据，ajax提交表单

!!!:此时的dataType可以省略不写，会自动读取所提交的数据格式。

3.定义提交的form.php文件，并把收集到的数组保存到新的php文件中(此时我的文件：menugroup.php)

$email = $_POST['email'];$phone = $_POST['phone'];$position = $_POST['position'];$submitdate = $_POST['submitdate'];$dd = array('username'=>$username,'email'=>$email ,'phone'=>$phone,'position'=>$position,'date'=>$submitdate); //转换成数组类型

$cachefile ='menugroup.php';echo (var_export($dd,true));//exit();

$arr = include('menugroup.php');$arr[] =$dd;$str = "<?php return ".var_export($arr,true).';';echo $str;file_put_contents($cachefile,$str);//alert("保存成功！");

?>

提交数据的form.php文件

4.messages.php读取数组为table表单在页面中。

header("Content-type:text/html;charset=utf-8");$json_string = include('menugroup.php');//$json_string=stripslashes(html_entity_decode($json_string));

// 把JSON字符串转成PHP数组

// $data =json_decode($json_string, true );

// 显示出来看看

// var_dump($json_string);

// echo $data['name'];

echo '

Application Information

';echo '';echo 'IDNAMEEMAILPHONEPOSITIONDATE';echo '';foreach($json_string as $k => $v){//echo $k . '
';

// print_r($v);

// echo '
';

echo '

'.($k+1).'';foreach ($json_string[$k] as $index => $value) {//echo $k . '
';

// echo $index . '
';

echo '

'.$value.'';

}echo '

';

}echo '

';?>

读取数据到页面中

下面是尝试使用纯JavaScript实现ajax异步提交数据

var xmlHttp = newXMLHttpRequest();

xmlHttp.onreadystatechange= function()

{if(xmlHttp.readyState == 4 && xmlHttp.status == 200)

{var formresult =xmlHttp.responseText;

alert('sussess');//console.log(formresult);

}

}

xmlHttp.open("post", "form.php",true);

xmlHttp.send(formData);