初学 Ajax（涉及 php)

一直知道

ajax

但是尚未真正了解，这次看了慕课网的《Ajax全接触》，算是有所收获，入了个门。
需要用到php，因为 Ajax也是向服务器请求（不知道这么解释对不对），所以还需要配置环境，我用的是 phpstudy ，很简单好用
请先了解过 http
（没创建数据库，所以并没有真正的保存）

随便写个静态页面


<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>请选择员工性别：</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>

写一个叫 server.php 的页面，作用是响应前端发送的请求


<?php//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;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();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){create();
}//通过员工编号搜索员工
function search(){//检查是否有员工编号的参数//isset检测变量是否设置；empty判断值为否为空//超全局变量 $_GET 和 $_POST 用于收集表单数据if (!isset($_GET["number"]) || empty($_GET["number"])) {echo "参数错误";return;}//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。//global 关键词用于访问函数内的全局变量global $staff;//获取number参数$number = $_GET["number"];$result = "没有找到员工。";//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果// 把 $staff 循环给新的变量 $value， 然后可以做一些操作foreach ($staff as $value) {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;}// 没做数据库: 获取POST表单数据并保存到数据库//提示保存成功echo "员工：" . $_POST["name"] . " 信息保存成功！";
}

现在开始是js部分

// GET 请求的查询
document.getElementById("search").onclick = function() { // 创建一个 XMLHttpRequest对象（老版本 ie5\6 是 ActiveXObject)var request = new XMLHttpRequest();// 开始一个GET 请求， server.php就是上面的那个php 文件， true表示异步 默认就是true。// GET 请求都是用 url来传输，所以就获取输入在 #keyword 中的数字， 来和php 中的 $number 对应查找request.open("GET", "server.php?number="   document.getElementById("keyword").value, true);/***  open() 和 send() 是一起使用的*  用来向 open() 中的请求体（server.php) 发送请求*  具体请自行搜索 send()的语法，比较长*/request.send();/***  send() 后会触发 onreadystatechange *  结束时会把 readyState 变成4*  而页面正确时的 status 是200*  所以，依此做一个判断*/request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { // responseText 是 server.php 的返回值document.getElementById("searchResult").innerHTML = request.responseText;} else {alert("发生错误："   request.status);}} }}// POST 请求的保存
document.getElementById("save").onclick = function() { var request = new XMLHttpRequest();request.open("POST", "server.php");// 是保存， 所以获取各值， & 是连接数据的格式？var data = "name="   document.getElementById("staffName").value "&number="   document.getElementById("staffNumber").value "&sex="   document.getElementById("staffSex").value "&job="   document.getElementById("staffJob").value;// POST 请求时，在 open() send() 中间要设立一个头信息request.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 将 data 传送过去request.send(data);request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText;} else {alert("发生错误："   request.status);}} }}

一个简单的Ajax 差不多就是这样了

数据还可以用JSON 的方式，仅需要改动几个地方

 // php 中 将 echo 的值改成 JSON格式，例如：if (!isset($_GET["number"]) || empty($_GET["number"])) {echo $jsonp . '({"success":false,"msg":"参数错误"})';return;}// js 中// 触发 onreadystatechange 后， 它的回调函数里创建一个调用了 JSON.parse 方法的变量来保存 server.php的返回值，例如：var data = JSON.parse(request.responseText);// data.success 的 success 也是 php 里设定的// alert 一下alert(data);  //  出了两个 object...// 那试试 console.log 吧console.log(data);  // Object {success: true, msg: "找到员工：员工编号:101, 员工姓名：洪七，员工性别：男, 员工职位：总经理"}if (data.success) {document.getElementById('searchResult').innerHTML = data.msg;} else {document.getElementById('searchResult').innerHTML = '出现错误：'   data.msg;}// 这样就可以调用 php 文件里返回的值了

视频中还有讲到 jQuery中的Ajax写法和 jQuery中跨域时怎么请求

jQuery 的写法很简单，比原生的简便太多了。我也就不总结啦，

若有不合适之处，还望指点一二

(:з」∠)

更多专业前端知识，请上【猿2048】www.mk2048.com

初学 Ajax（涉及 php)相关推荐

初学Ajax相关知识
一. 概念 ASynchronous JavaScript And XML 异步的JavaScript 和 XML >>>异步和同步:客户端和服务器端相互通信的基础上 ...
信息传递服务器,AJAX的与服务器之间的信息传递原理（初学）
最近一直在弄自己的博客www.aleiblog.com,进去看看吧,又不会怀孕今天初学AJAX,还没有完全感受到它的强大,刚开始有不少不懂得地方,看了资料的的第一章时,似乎明白了不少. AJAX为浏 ...
零基础AJAX入门（含Demo演示源文件）
零基础AJAX入门(含Demo演示源文件) 作者:一点一滴的Beer 个人主页:http://www.cnblogs.com/beer 摘要:因为笔者的大四毕业设计是做WebGIS系统,用过Web版 ...
struts2 jquery ajax 局部刷新遇到的各种问题
我们的网站一开始都是由前台提交表单到action,每次一个小操作整个页面都会刷新,影响用户体验,这次由我实现部分功能的局部刷新,但是初学ajax遇到不少问题 1.我们在struts.xml外扩展了一个 ...
AJAX开发简略（转）
AJAX开发简略... 1 一.AJAX定义... 3 二.现状与需要解决的问题... 3 三.为什么使用AJAX. 4 四.谁在使用AJAX. 6 五.用AJAX改进你的设计... 6 例子1:数据 ...
深入理解ajax系列第一篇——XHR对象
前面的话 1999年,微软公司发布IE5,第一次引入新功能:允许javascript脚本向服务器发起HTTP请求.这个功能当时并没有引起注意,直到2004年Gmail发布和2005年Google Ma ...
Ajax+asp.net无刷新验证用户名
注册用户页面代码如下 <script language="javascript" type="text/javascript"> var xmlHt ...
WEB前端深入了解JavaScript ajax—XHR对象
前面的话 1999年,微软公司发布IE5,第一次引入新功能:允许javascript脚本向服务器发起HTTP请求.这个功能当时并没有引起注意,直到2004年Gmail发布和2005年Google Ma ...
【JavaScript】Ajax
文章目录 1. 前后端交互 2. Ajax 2.1 Ajax概述 2.2 Ajax如何工作 2.3 XMLHttpRequest对象 2.4 使用Ajax eg:使用ajax实现页面的数据通过Node ...

初学 Ajax（涉及 php)

随便写个静态页面

写一个叫 server.php 的页面，作用是响应前端发送的请求

现在开始是js部分

一个简单的Ajax 差不多就是这样了

数据还可以用JSON 的方式，仅需要改动几个地方

视频中还有讲到 jQuery中的Ajax写法和 jQuery中跨域时怎么请求

jQuery 的写法很简单，比原生的简便太多了。我也就不总结啦，

若有不合适之处，还望指点一二

初学 Ajax（涉及 php)相关推荐

最新文章

热门文章

初学 Ajax（涉及 php)

随便写个静态页面

写一个叫 server.php 的页面，作用是响应前端发送的请求

现在开始是js部分

一个简单的Ajax 差不多就是这样了

数据还可以用JSON 的方式， 仅需要改动几个地方

视频中还有讲到 jQuery中的Ajax写法 和 jQuery中跨域时怎么请求

jQuery 的写法很简单， 比原生的简便太多了。 我也就不总结啦，

若有不合适之处， 还望指点一二

初学 Ajax（涉及 php)相关推荐

最新文章

热门文章

数据还可以用JSON 的方式，仅需要改动几个地方

视频中还有讲到 jQuery中的Ajax写法和 jQuery中跨域时怎么请求

jQuery 的写法很简单，比原生的简便太多了。我也就不总结啦，

若有不合适之处，还望指点一二