为了账号安全,请及时绑定邮箱和手机立即绑定

为什么点击创建员工按钮没有任何反应,而查询员工功能一切正常,这是怎么回事,看代码看半天也没看出来

serverjson.php

<?php 

//设置页面内容是html编码格式为utf-8

header("Content-Type:application/json;charset=utf-8");



//定义一个多维数组,包含员工信息,每条员工信息为一个数组


$staff = array

(

array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>"总经理"),

array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>"开发工程师"),

array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>"产品经理")

);



//判断如果是GET请求,则搜索员工,如果是POST请求,则创建员工

//$_SERVER是一个超全局变量,在一个脚本的全部作用域中都可用,不用使用global关键字

//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法

if($_SERVER["REQUEST_METHOD"] == "GET"){

search();

}

if($_SERVER["REQUEST_METHOD"] == "POST"){

create();

}


//通过员工编号搜索员工

function search(){

//检查是否有员工编号的参数

//isset检测变量是否设置;empty判断值是否为空

//超全局变量$_GET和$_POST用于收集变单数据

if(!isset($_GET["number"]) || empty($_GET["number"])){

echo '{"success":false,"msg":"参数错误"}';

return;

}

//函数之外声明的变量拥有Global作用域,只能在函数以外进行访问

//global关键词用于访问函数内的全局变量

global $staff;

//获取number参数

$number = $_GET['number'];

$result = '{"success":false,"msg":"没有找到员工"}';

//遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果

foreach($staff as $value){

if($value["number"] == $number){

$result = '{"success":true,"msg":"找到员工,员工编号:'.$value["number"].',员工姓名:'.$value["name"].',员工性别:'.$value["sex"].',员工职位:'.$value["job"].'"}';

break;

}

}

echo $result;

}


//创建员工

function create(){

//判断信息是否填写完全

if(!isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["number"]) || empty($_POST["number"]) ||

  !isset($_POST["sex"]) || empty($_POST["sex"]) || !isset($_POST["job"]) || empty($_POST["job"])){

echo '{"success":false,"msg":"参数错误,员工信息填写不全"}';

return;

}

//TODO:获取POST表单数据并保存到数据库

//提示保存成功

echo '{"success":true,"msg":"员工:'.$_POST["name"].'信息保存成功!"}';

}

?>


XMLHttpRequestJson.html

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=utf-8">

<title>Demo</title>

<style type="text/css">

body,input,label,button,h1,p,select{

font-size:28px;

line-height:1.7em;

}

</style>

</head>


<body>

<h1>员工查询</h1>

<label>请输入员工编号:</label>

<input type="text" id="keyword" />

<button id="search">查询</button>

<p id="searchResult"></p>

<hr>


<h1>员工新建</h1>

<label>请输入员工姓名:</label>

<input type="text" id="staffName" /><br/>

<label>请输入员工编号:</label>

<input type="name" id="staffNumber" /><br/>

<label>请选择员工性别:</label>

<select id="staffSex">

<option>男</option>

    <option>女</option>

</select>

<br/>

<label>请输入员工职位:</label>

<input type="text" id="staffJob" />

<button id="save">保存</button>

<p id="createResult"></p>

</body>

<script type="text/javascript">

document.getElementById("search").onclick = function(){

var request = new XMLHttpRequest();

request.open("GET","serverjson.php?number="+document.getElementById("keyword").value);

request.send();

request.onreadystatechange = function(){

if(request.readyState === 4){

if(request.status === 200){

var data = JSON.parse(request.responseText);

if(data.success){

document.getElementById("searchResult").innerHTML = data.msg;

}else{

document.getElementById("searchResult").innerHTML = "出现错误:" + data.msg;

}

}else{

alert("发生错误:" + request.status);

}

}

}

}


document.getElementById("save").onclick = function() { 

var request = new XMLHttpRequest();

request.open("POST", "serverjson.php");

var data = "name=" + document.getElementById("staffName").value 

                 + "&number=" + document.getElementById("staffNumber").value 

                 + "&sex=" + document.getElementById("staffSex").value 

                 + "&job=" + document.getElementById("staffJob").value;

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

request.send(data);

request.onreadystatechange = function() {

if (request.readyState===4) {

if (request.status===200) { 

var data = JSON.parse(request.responseText);

if (data.success) { 

document.getElementById("createResult").innerHTML = data.msg;

} else {

document.getElementById("createResult").innerHTML = "出现错误:" + data.msg;

}

} else {

alert("发生错误:" + request.status);

}

}

}

</script>

</html>




正在回答

2 回答

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

应该是Content-Type, 注意Type的t大写

0 回复 有任何疑惑可以回复我~

把题主的代码粘贴下来运行没有发现错误啊。。。

//img1.sycdn.imooc.com//59e9fc7b000199cc07550364.jpg

//img1.sycdn.imooc.com//59e9fc7c000101a306950354.jpg

//img1.sycdn.imooc.com//59e9fc7c000185e705780129.jpg

题主是不是把serverjson.php这句话也写进php里了。。。。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
Ajax全接触
  • 参与学习       224850    人
  • 解答问题       663    个

本课程通过一个案例,讲解Ajax的相关概念原理实现方式和应用

进入课程

为什么点击创建员工按钮没有任何反应,而查询员工功能一切正常,这是怎么回事,看代码看半天也没看出来

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信