AJAX-实现简单的异步传输实例

最新推荐文章于 2021-08-06 10:56:56 发布

柒青衿

最新推荐文章于 2021-08-06 10:56:56 发布

阅读量2.2k

点赞数

分类专栏： AJAX JavaScript 文章标签： AJAX 数据传输异步

本文链接：https://blog.csdn.net/qiqingjin/article/details/50465279

版权

本文通过一个实例展示了如何利用AJAX进行异步数据传输，涉及员工信息的查询和新增操作。在纯HTML页面中，通过AJAX调用PHP页面实现后台交互，实现了页面无刷新的数据更新。

摘要由CSDN通过智能技术生成

需求：查询员工信息，新增员工信息。

页面：一个纯html页面，一个php页面。

代码：

html页面：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
	font-size: 28px;
	line-height:1.7;
}
</style>	
</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