Ajax的简单实现
Ajax的实现需要服务器端和客户端配合来实现
下面看服务器端的代码,也就是用php编写的一个后台脚本文件
<?php
//设置页面内容,编码格式是utf8
header("Content-Type:text/plain;charset=utf-8");
//定义一个多维数组,每条员工信息为一个数组
$staff = array(
array('name' =>'杰伦' ,'number'=>'01' ,'sex'=>'男' ,'job'=>'总经理' ),
array('name' =>'弈迅' ,'number'=>'02' ,'sex'=>'男' ,'job'=>'开发经理' ),
array('name' =>'力宏' ,'number'=>'03' ,'sex'=>'男' ,'job'=>'产品经理' )
);
//判断请求方式,如果是get请求则进入search方法,post请求进入create方法
//$_SERVER是超全局变量,在一个脚本文件的全部作用域都能使用
//$_SERVER["REQUEST_METHOD"]返回页面使用的请求方法
if($_SERVER["REQUEST_METHOD"] == "GET") {
search();//搜索员工
}elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
# code...
create();//新建员工
}
//通过员工编号搜索员工
function search(){
//检查是否有员工编号的参数
//issent检测变量是否设置,empty判断值是否为空
//超全局变量$_GET和$_POST用来收集表单数据
if(!isset($_GET["number"])||empty($_GET["number"])){
echo "参数错误";
return;
}
//函数之外声明的变量拥有Global作用域,只能在函数以外进行访问
//需要用global关键词,才能访问函数内的全局变量
global $staff;
//获取number参数
$number = $_GET["number"];
$result = "没有员工。";
//遍历staff数组,查找key值为number的员工是否存在
foreach ($staff as $value) {
# code...
if($value["number"] == $number){
$result="找到员工:员工编号:".$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 "参数错误,员工信息填写不全";
return;
} echo "员工:".$_POST["name"]."信息保存成功!";
} ?>
客户端的代码如下
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<p id="searchResult"></p> <h1>员工新建</h1>
<label>请输入员工姓名:</label>
<input type="text" id="staffName"><br>
<label>请输入员工编号:</label>
<input type="text" id="staffNumber"><br>
<label for="">请输入员工性别:</label>
<select id="staffSex">
<option>男</option>
<option>女</option>
</select><br>
<label>请输入员工职位:</label>
<input type="text" id="staffJob"><br>
<button id="save">保存</button>
<p id="createResult"></p> <script type="text/javascript">
document.getElementById("search").onclick=function(){
//发送Ajax查询请求并处理
//新建一个XHR对象
var request = new XMLHttpRequest();
//调用open方法(get方法,地址)地址上需要带一些参数
request.open("GET","newPHP.php?number=" + document.getElementById("keyword").value);
//使用send()方法发送请求
request.send();
//通过onreadystatechange事件来监听请求
request.onreadystatechange=function(){
//readyState=4则表示请求结束
if(request.readyState === 4){
//status=200表示请求成功
if(request.status === 200){
//通过responseText来获取报文并赋给DOM,用来显示查询结果
document.getElementById("searchResult").innerHTML = request.responseText;
}else{
alert("发生错误" + request.status);
}
}
}
} document.getElementById("save").onclick=function(){
var request = new XMLHttpRequest();
//调用open方法(post方法,地址)把参数直接传到send方法
request.open("POST","newPHP.php");
//构造参数data
var data = "name=" + document.getElementById("staffName").value
+ "&number=" + document.getElementById("staffNumber").value
+ "&sex=" + document.getElementById("staffSex").value
+ "&job=" + document.getElementById("staffJob").value;
//设置content-type
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.status);
}
}
}
}
</script>
</body> </html>
具体的一些属性比如responseText,一些方法response.open
想要具体了解这些,可以看我之前的一篇:
Ajax_HTTP请求以及响应
Ajax的简单实现的更多相关文章
- html --- ajax --- javascript --- 简单的封装
Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 第107天:Ajax 实现简单的登录效果
使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...
- Django ajax的简单使用、自定义分页器
一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...
- AJAX实现简单的注册页面异步请求
p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...
- 让Ajax更简单
之前写了一篇 ASP.NET中一种超简单的Ajax解决方案 最近把他拿出来更新了下,把demo也搞的更详细了一点 加入了blqw.Json,所以支持更多类型参数和返回值 优化了对exception的处 ...
- ASP.NET MVC Ajax.ActionLink 简单用法
ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...
- AJAX 的简单用法:
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以 ...
- jquery中ajax的简单使用
一.load() 这是最简单的一个函数,传入一个url他会异步加载该url的内容,然后将内容插入每一个选中的元素中,替换掉其中已经存在的内容. 所以最简单的用法是: $("#myDiv&qu ...
随机推荐
- hdu2024
这题目感觉不是很严谨,如果是关键字的话也是不能作为合法标识符的,但是这个不用检测,就算要检测也会很费劲,还得用字符串匹配,而且还得知道一共都有哪些关键字,太麻烦了,所以出题人原意就是检查大小写字母数字 ...
- 【Luogu】P1352没有上司的舞会(树形DP)
题目链接 设f[i][0]表示第i个人不去舞会时子树的最大欢乐度,f[i][1]表示第i个人去舞会时子树的最大欢乐度. 则有状态转移方程:f[i][0]+=∑max(f[to][0],f[to][1] ...
- BZOJ 2780 [Spoj]8093 Sevenk Love Oimaster ——广义后缀自动机
给定n个串m个询问,问每个串在n个串多少个串中出现了. 构建广义后缀自动机,(就是把所有字符串的后缀自动机合并起来)其实只需要add的时候注意一下就可以了. 然后对于每一个串,跑一边匹配,到达了now ...
- 《Spring Security3》第四章第三部分翻译下(密码加salt)
你是否愿意在密码上添加点salt? 如果安全审计人员检查数据库中编码过的密码,在网站安全方面,他可能还会找到一些令其感到担心的地方.让我们查看一下存储的admin和guest用户的用户名和密码值: 用 ...
- Codevs 2855 游乐园的迷宫
2855 游乐园的迷宫 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 迷宫可是每个游乐园必不可少的项目,菜菜当然是要尝试一下啦. ...
- tensorflow加载embedding模型进行可视化
1.功能 采用python的gensim模块训练的word2vec模型,然后采用tensorflow读取模型可视化embedding向量 ps:采用C++版本训练的w2v模型,python的gensi ...
- hdu 1717
小数化分数2 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- PSEUDO LEAST RECENTLY USED (PLRU) CACHE REPLACEMENT
A multi-way cache system includes multi-way cache storage circuitry, a pseudo least recently used (P ...
- 关于代码调试de那些事
原文出处:http://www.wklken.me/posts/2014/11/23/how-to-debug.html 关于代码调试de那些事 1.你得明白你在做什么, 保持清醒 2.想清楚了再写代 ...
- R语言入门视频笔记--6--R函数之cat、format、switch函数
一.cat 猫 怎么就变成一个输出函数了呢? cat 一个输出函数,功能和print有相同之处 我们一起比较看看 1.cat(“hellow world”)或cat('hellow world') ...