WampServer下的AJAX示例

本文将介绍一个简单的利用Ajax调取后台数据的示例。

相关概念

AJAX,即Asynchronous Javascript And XML(异步的JavaScript和XML),用JavaScript执行异步网络请求,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。利用Ajax通过后台与服务器进行数据交换可以使网页实现异步更新,无须重新加载整个网页,就可以对网页的某部分进行更新操作。

JSON,即JavaScript Object Notation(JavaScript 对象表示法), 是一种轻量级的数据交换格式。它基于 ECMAScript 的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。

PHP, 是一种创建动态交互性站点的服务器端脚本语言。

MySQL,是一个关系型数据库管理系统。

WampServer,即Windows Apache Mysql PHP集成安装环境,是一款集成Apache Web服务器、PHP解释器以及MySQL数据库的整合软件包。

官方下载地址:http://www.wampserver.com/en/download-wampserver-64bits/

一、下载安装并运行 WampServer

WampServer 可以通过其官网或者第三方进行下载。

具体的安装和调试不作为本文的主要内容进行介绍,第一次使用WampServer的用户需要相关教程的指导。

安装成功后,启动WampServer,打开浏览器在网址搜索栏中输入 localhost 或者 127.0.0.1(或加端口号)就可以访问本地站点,来调试 PHP 代码等。

二、创建测试用数据表

1. 在Windows操作系统下,运行cmd:

2. 转到mysql的保存目录,并登录mysql:

3. 执行以下命令行:

以上,我们用来测试的数据表就创建好了。

三、编写服务器端代码

// 将文件设置为纯文本的形式, 编码格式是utf-8

header("Content-Type: text/plain;charset=utf-8");

// $_SERVER['REQUEST_METHOD']用来获取访问页面使用的请求方法, POST或GET...

// 如果是GET方法,则执行search方法进行查询

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

search();

}

/**

* search 执行具体的查询操作

*/

function search() {

//是否通过url传递有效参数

if (!isset($_GET['id']) empty($_GET['id'])) {

echo '{"msg":"参数有误"}';

return;

}

// 获取查询结果

$feedback = query($_GET['id']);

if (!$feedback) {

echo '{"msg":"查询失败"}';

return;

}

// 回应json

echo '{"msg" : "商品名称:'.$feedback['name'].',商品价格:'.$feedback['price'].'元,商品库存:'.$feedback['remaining'].'个。"}';

}

/**

* query 连接MySQL数据库,并查询相关数据

* @param number $id 商品ID

* @return array $value 查询所得的商品信息

*/

function query($id) {

// 连接数据库

$mysqli = new mysqli('localhost', 'root', '', 'test');

// 检测连接状态

if ($mysqli->connect_error) {

die ('Connect Error: ' . $mysqli->connect_error);

}

// 设置字符集

$mysqli->set_charset('utf8');

$table_name = 'commodity';

// $sql = "SELECT * FROM `{$table_name}` WHERE `id`='{$id}' LIMIT 1";

$sql = "SELECT * FROM $table_name WHERE id = $id LIMIT 1";

// 查询数据库

$result = $mysqli->query($sql);

// 从结果集中取得一行

$value = $result->fetch_array(MYSQLI_ASSOC);

// 释放结果内存

$result->free();

// 关闭连接

$mysqli->close();

return $value;

}

四、前端代码

HTML部分

...

商品信息查询

请输入商品编号:

查询

...

预览:

2. JS部分

var query = document.getElementById('query'),

goods_id = document.getElementById('goodsId'),

notice = document.getElementById('notice');

query.onclick = function() {

// 创建XMLHttpRequest对象

var xmlhttp = new XMLHttpRequest();

// 当 readyState 改变时,触发 onreadystatechange 事件

xmlhttp.onreadystatechange = function() {

// 请求完成

if (xmlhttp.readyState === 4) {

if (xmlhttp.status === 200) {

// 解析json字符串

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

notice.innerHTML = data.msg;

} else {

notice.innerHTML = '请求失败,状态码:'.xmlhttp.status;

}

}

};

// 创建http请求

xmlhttp.open('GET', 'server.php?id=' + goods_id.value, false);

// 发送

xmlhttp.send(null);

};

测试(商品ID = 3):

五、总结

如上,本文演示了利用AJAX访问后台数据更新前端页面的一个简单示例。由于时间关系,具体内容可能介绍得不够细致。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180210G0B8O400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券