第一次用ajax做的demo(text方式传递数据)

前端测试页面：

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>ajax demo</title>
</head>
<body>
<h1>请输入查询编号</h1>
<input type=text id="keyword">
<input type="button" id="search" value="查询">
<p id="searchResult"></p>
<h1>请输入以下信息</h1>
<lable>姓名：</lable><input type="text" id="name">
<lable>班级：</lable><input type="text" id="aclass">
<lable>年龄</lable>
<select id="sex">
	<option value="男">男</option>
	<option value="女">女</option>
</select>
<input type="button" id="create" value="提交">
<p id="createResult"></p>

<script>

	var request=null;
	document.getElementById("search").onclick = function() {
		if(window.XMLHttpRequest){
			request = new XMLHttpRequest();
		}else{
			request = new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6
		}
		
		request.open("GET","index.PHP?number="+document.getElementById("keyword").value);
		request.send();
		request.onreadystatechange = function(){
			
			if(request.readyState == 4){
				if(request.status == 200){
					document.getElementById("searchResult").innerHTML = request.responseText;
				}else{
					alert("发生错误"+request.status);
				}
			}
		}
		
	};
	
	document.getElementById("create").onclick = function() {
		if(window.XMLHttpRequest){
			request = new XMLHttpRequest();
		}else{
			request = new ActiveXObject("Microsoft.XMLHTTP");
		}
		request.open("POST","index.PHP");
		
		var data = "name="+document.getElementById("name").value
		+"&aclass="+document.getElementById("aclass").value
		+"&sex="+document.getElementById("sex").value;
		//代表提交的是表单类型，用post提交的一定要设置
		request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		request.send(data);
		request.onreadystatechange = function() {
			
			if(request.readyState===4){
				if(request.status===200){
					document.getElementById("createResult").innerHTML = request.responseText;
				}else{
					alert("request error"+request.status);
				}
			}
		}
	};
	
</script>
</body>
</html>

后台测试页面：

<?PHP
//header("Content-Type:application/json;charset=utf-8");
header("Content-Type:text/plain;charset=utf-8");//代表提交的数据是文本类型
//header("Content-Type:text/xml;charset=utf-8");
//header("Content-/Type:text/html;charset=utf-8");
//header("Content-Type"application/javascript;charset=utf-8");

$student = array
    (
        array("name"=>"张三","aclass"=>"1班","sex"=>"男","number"=>101),array("name"=>"李四","aclass"=>"2班","number"=>102),array("name"=>"王五","number"=>103)   
        
    );

if($_SERVER['REQUEST_METHOD']=="GET"){
    search();
}elseif($_SERVER['REQUEST_METHOD']=="POST"){
    create();
}

function search() {
    if(!isset($_GET["number"]) || empty($_GET["number"])){
        echo "参数错误";
        return;
    }
    
    global $student;
    $number = $_GET["number"];
    $result = "没有找到员工";
    foreach($student as $value){
        if($value["number"]==$number){
            $result = "找到学生---学生学号：".$value["number"].",学生姓名:".$value["name"].
            ",学生班级：".$value["aclass"].",学生性别:".$value["sex"];
            break;
        }
    }
    echo $result;
}

function create() {
    if(!isset($_POST["name"]) || empty($_POST["name"])
        || !isset($_POST["aclass"]) || empty($_POST["aclass"])
            || !isset($_POST["sex"]) ||empty($_POST["sex"])){
        echo "参数错误...";
        return ;
    } 
    
    
    echo $_POST["name"]."学生信息保存成功";
  // echo $_POST["name"]."--".$_POST["aclass"]."--".$_POST["sex"];
}
?>

结果：

原文链接：https://www.f2er.com/ajax/163404.html

第一次用ajax做的demo(text方式传递数据)

猜你在找的Ajax相关文章