Javascript PHP发布并打印到innerHTML

我正在尝试将员工发布到sql，并在“提交”按钮打开后显示员工数据。我可以让它发布和显示，但不能同时发布和显示。 这是它应该看起来的样子 JSBin：

当我实现php代码时，它将员工发布到数据库中，但随后刷新表单，并且不显示输出信息。有更好的方法吗

var employees=[];


function process() {
'use strict';

var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var department = document.getElementById('department').value;

// 2) Create an employeeId variable and store a randomly generated 8 digit employee id number. Make sure the id number is unique.
var employeeId = parseInt(Math.random() * 100000000);

// Reference to where the output goes:
var output = document.getElementById('output');

// 3) Add an employeeId property to your employee object and set its value to your employeeId variable.
// 4)  Make the employee object as a JSON object and send it to the back end as a JSON object.
var employee = {
    firstName: firstName,
    lastName: lastName,
    department: department,
    employeeId: employeeId,
    date: new Date()
};

// 5)  Add each newly created employee to your employees array (check duplicate before adding).
employees.push(employee);

// 6)  Just so you can debug things easier, use console.log to output your employees array to the console after creating a new employee.
console.log(employees);


// 7)  Display the emplodyee in the output HTML.
var message = '<h2>Employee Added</h2>Name: ' + employee.lastName + ', ' + employee.firstName + '<br>';
message += 'Department: ' + employee.department + '<br>' + 'Employee ID: ' + employee.employeeId + '<br>' + 'Hire Date: ' + employee.date.toDateString() + '<br>' +
// 8)  Add one last line to your message that will display the total number of employees that have been added to your array.
'Number of employees: ' + employees.length;

// Display the employee object:
output.innerHTML = message;

addtosql2(employee)
return false;
}


function addtosql2(employee) {
<?php    $servername = "localhost"; ?>
<?php    $username = "root"; ?>
<?php    $password = ""; ?>
<?php     $dbname = "employees"; ?>


<?php  $conn = mysqli_connect($servername, $username, $password, $dbname); ?>
<?php if (!$conn) {
     die("Connection failed: " . mysqli_connect_error());
 }

    $firstName = employee.firstName;
    $lastName = employee.lastName;
    $department =  employee.department;
     $id = employee.id;

     $sql = "INSERT INTO employee (firstname, lastname, department, id ,dateAdded)
     VALUES ('$firstName', '$lastName', '$department', '$id', NOW())";


 if (mysqli_query($conn, $sql)) {

 } else {
     echo "Error: " . $sql . "<br>" . mysqli_error($conn);
 }

 mysqli_close($conn); ?>
 return false;
}

function init() {
'use strict';
document.getElementById('theForm').onsubmit = process;
}

window.onload = init;

var员工=[]；
函数过程（）{
"严格使用",；
var firstName=document.getElementById（'firstName'）。值；
var lastName=document.getElementById（'lastName'）.value；
var department=document.getElementById（'department'）.value；
//2）创建employeeId变量并存储随机生成的8位员工id号。确保id号唯一。
var employeeId=parseInt（Math.random（）*100000000）；
//对输出位置的引用：
var output=document.getElementById（'output'）；
//3）将employeeId属性添加到employee对象，并将其值设置为employeeId变量。
//4）将employee对象作为JSON对象，并将其作为JSON对象发送到后端。
var雇员={
名字：名字，
lastName:lastName，
部门:部门,，
employeeId:employeeId，
日期：新日期（）
};
//5）将每个新创建的员工添加到员工数组中（添加前请选中“重复”）。
员工。推送（员工）；
//6）为了便于调试，请在创建新员工后使用console.log将员工数组输出到控制台。
控制台日志（员工）；
//7）在输出HTML中显示雇员。
var message='Employee AddedName:'+Employee.lastName+'，'+Employee.firstName+'
'；
消息+='部门：'+employee.Department+'
'+'员工ID:'+employee.employeeId+'
'+'雇用日期：'+employee.Date.toDateString（）+'
'+
//8）在消息中添加最后一行，该行将显示已添加到阵列中的员工总数。
“员工数量：”+employees.length；
//显示员工对象：
output.innerHTML=消息；
addtosql2（员工）
返回false；
}
功能addtosql2（员工）{
您需要在您的案例中使用ajax