<!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" 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>

<script>

document.getElementById("search").onclick = function() {

	var request = new XMLHttpRequest();

	request.open("GET", "server.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("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;

	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>

　　

http请求的GET和POST请求：查询和新增（ajax）的更多相关文章

  1. 读取jar文件的sha1码，请求maven官方的solrsearch接口查询该jar文件所对应的maven坐标信息

    版权声明:本文为博主原创文章,未经博主允许不得转载. import com.google.gson.JsonObject; import com.google.gson.JsonParser; imp ...

  2. JavaScript JSON timer(计时器) AJAX HTTP请求 同源策略 跨域请求

    JSON 介绍 1. JSON: JavaScript Object Notation 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是 ...

  3. 一次ajax调用，发送了两次请求（一次为请求方法为option，一次为正常请求）

    在项目了开发时遇见一个奇怪的现象,就是我在js里面发送一次ajax请求,在浏览器network那边查询到的却是发送了两次请求,第一次的Request Method参数为OPTIONS,第二次的Requ ...

  4. HTTP深入浅出http请求（转）-----http请求的过程和实现机制

    摘要:此文章大概讲明了http请求的过程和实现机制,可以作为了解,至于请求头和响应头的具体信息需要查看下一篇随笔:Http请求详解(转)----请求+响应各字段详解   HTTP(HyperText ...

  5. http请求报文格式（请求行、请求头、空行 和 请求包体）和响应报文格式（状态行、响应头部、空行 和 响应包体）

    转载 出处 超文本传输协议(Hypertext Transfer Protocol,简称HTTP)是应用层协议.HTTP 是一种请求/响应式的协议,即一个客户端与服务器建立连接后,向服务器发送一个请求 ...

  6. http 请求包含哪几个部分（请求行、请求头、请求体）

    http协议报文     1.请求报文(请求行/请求头/请求数据/空行)         请求行             求方法字段.URL字段和HTTP协议版本             例如:GET ...

  7. go中处理各种请求方式以及处理接口请求参数

    话不多说直接上代码,解读内容全部在代码中 1.处理请求方式 package main import ( "fmt" "io/ioutil" "net/ ...

  8. http请求包含哪几个部分（请求行、请求头、请求体）

    http协议报文     1.请求报文(请求行/请求头/请求数据/空行)         请求行             求方法字段.URL字段和HTTP协议版本             例如:GET ...

  9. ASP.NET Core应用针对静态文件请求的处理[2]: 条件请求与区间请求

    通过调用ApplicationBuilder的扩展方法UseStaticFiles注册的StaticFileMiddleware中间件帮助我们处理针对文件的请求.对于StaticFileMiddlew ...

  10. 【读书笔记】iOS网络-同步请求，队列式异步请求，异步请求的区别

    一,同步请求的最佳实践. 1,只在后台过程中使用同步请求,除非确定访问的是本地文件资源,否则请不要在主线程上使用. 2,只有在知道返回的数据不会超出应用的内存时才使用同步请求.记住,整个响应体都会位于 ...

随机推荐

  1. vuex是什么？怎么用，例子

    什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 为什么要用 ...

  2. Word 中将正文中的参考文件标号链接到参考文献具体条目

    一.概论 在论文撰写过程中,不可避免地引用到参考文献.通常,论文格式要求我们在引用的正文后,使用中括号将参考文献章节中对应的出处条目序号引起来,例如: 有时,我们要建立起这两者之间的链接关系. 二.设 ...

  3. 如何通过包名打开手机里的APP

    目前已知的打开APP的方式有两种, 一种是通过openUrl打开,这种有一个严重的问题,即必须添加白名单,白名单之外的APP即时安装了也无法打开. 另一种就是今天的重点,通过包名打开APP.先上核心代 ...

  4. CF1137F Matches Are Not a Child's Play(LCT思维题)

    题目 CF1137F 很有意思的题目 做法 直接考虑带修改的做法,上一次最大值为u,这次修改v,则最大值为v了 我们发现:\(u-v\)这条链会留到最后,序列里的其他元素相对位置不变,这条链会\(u\ ...

  5. Asp.net Core Windows部署

    一.  IIS 部署模式 1. 安装IIS服务 2. 下载安装Core SDK        https://www.microsoft.com/net/download/Windows/build3 ...

  6. Laravel核心解读--异常处理

    异常处理是编程中十分重要但也最容易被人忽视的语言特性,它为开发者提供了处理程序运行时错误的机制,对于程序设计来说正确的异常处理能够防止泄露程序自身细节给用户,给开发者提供完整的错误回溯堆栈,同时也能提 ...

  7. 操作shell两种方式

    交互式shell package main import ( "golang.org/x/crypto/ssh" "log" "os" &q ...

  8. 20145216史婧瑶《Java程序设计》第三次实验报告

    实验三 敏捷开发与XP实践 实验内容 使用git上传代码,两个人进行小组合作,队友下载代码并修改再重新上传. 实验步骤 一. 使用git上传代码 1.找到需要push的文件所在文件夹,右键点击Git ...

  9. Spring笔记（二）

    1. SPRING aop入门 Aop  面向切面编程 在一个大型的系统中,会写很多的业务类--业务方法 同时,一个大型的系统中,还有很多公共的功能:比如事务管理.日志处理.缓存处理..... 1.1 ...

  10. 重新想，重新看——CSS3变形，过渡与动画④

    最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...