http请求的GET和POST请求：查询和新增（ajax）
<!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）的更多相关文章
- 读取jar文件的sha1码，请求maven官方的solrsearch接口查询该jar文件所对应的maven坐标信息
版权声明:本文为博主原创文章,未经博主允许不得转载. import com.google.gson.JsonObject; import com.google.gson.JsonParser; imp ...
- JavaScript JSON timer(计时器) AJAX HTTP请求 同源策略 跨域请求
JSON 介绍 1. JSON: JavaScript Object Notation 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是 ...
- 一次ajax调用，发送了两次请求（一次为请求方法为option，一次为正常请求）
在项目了开发时遇见一个奇怪的现象,就是我在js里面发送一次ajax请求,在浏览器network那边查询到的却是发送了两次请求,第一次的Request Method参数为OPTIONS,第二次的Requ ...
- HTTP深入浅出http请求（转）-----http请求的过程和实现机制
摘要:此文章大概讲明了http请求的过程和实现机制,可以作为了解,至于请求头和响应头的具体信息需要查看下一篇随笔:Http请求详解(转)----请求+响应各字段详解 HTTP(HyperText ...
- http请求报文格式（请求行、请求头、空行 和 请求包体）和响应报文格式（状态行、响应头部、空行 和 响应包体）
转载 出处 超文本传输协议(Hypertext Transfer Protocol,简称HTTP)是应用层协议.HTTP 是一种请求/响应式的协议,即一个客户端与服务器建立连接后,向服务器发送一个请求 ...
- http 请求包含哪几个部分（请求行、请求头、请求体）
http协议报文 1.请求报文(请求行/请求头/请求数据/空行) 请求行 求方法字段.URL字段和HTTP协议版本 例如:GET ...
- go中处理各种请求方式以及处理接口请求参数
话不多说直接上代码,解读内容全部在代码中 1.处理请求方式 package main import ( "fmt" "io/ioutil" "net/ ...
- http请求包含哪几个部分（请求行、请求头、请求体）
http协议报文 1.请求报文(请求行/请求头/请求数据/空行) 请求行 求方法字段.URL字段和HTTP协议版本 例如:GET ...
- ASP.NET Core应用针对静态文件请求的处理[2]: 条件请求与区间请求
通过调用ApplicationBuilder的扩展方法UseStaticFiles注册的StaticFileMiddleware中间件帮助我们处理针对文件的请求.对于StaticFileMiddlew ...
- 【读书笔记】iOS网络-同步请求，队列式异步请求，异步请求的区别
一,同步请求的最佳实践. 1,只在后台过程中使用同步请求,除非确定访问的是本地文件资源,否则请不要在主线程上使用. 2,只有在知道返回的数据不会超出应用的内存时才使用同步请求.记住,整个响应体都会位于 ...
随机推荐
- Django restful Framework 之Requests and Response 方法
前言: 本章主要介绍REST framework 内置的必要的功能. Request objects Response objects Status codes Wrapping API views ...
- Java并发包中线程池的种类和特点介绍
Java并发包提供了包括原子量.并发集合.同步器.可重入锁.线程池等强大工具这里学习一下线程池的种类和特性介绍. 如果每项任务都分配一个线程,当任务特别多的时候,可能会超出系统承载能力.而且线程的创建 ...
- LRU算法---缓存淘汰算法
计算机中的缓存大小是有限的,如果对所有数据都缓存,肯定是不现实的,所以需要有一种淘汰机制,用于将一些暂时没有用的数据给淘汰掉,以换入新鲜的数据进来,这样可以提高缓存的命中率,减少磁盘访问的次数. LR ...
- 为什么gitHub提交记录显示作者名称是unknow?
unknow,为什么? gitHub上提交记录显示作者名称是unknow,刚开始没怎么管,后面遇到问题看提交记录时发现有两个unknow(一定有一个人遇到和我一样的问题了,哈哈..),于是解决一下吧. ...
- iframe跨页面调用函数
在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数.比如说:现在有两个页面parent.html和child.html.其中parent. ...
- crontab + rsyncd同步方案
目的主机: rsync --daemon [root@iZ23ohdbxmrZ ~]# vim /etc/rsyncd.conf #global settingsport = 873pid file= ...
- 一篇关于cfDNA的综述
文章题目:A Field Guide for Cancer Diagnostics using cell-free DNA: from Principles to Practice and Clini ...
- kafka运行错误：提示找不到或者无法加载主类错误解决方法
kafaka版本:kafka_2.11-1.1.0原因有2个:1 目录不能有空格 D:\Soft\kafka_2.11-1.1.0 , 放在Program Files目录中一直有问题2 修改D ...
- 4.9版本的linux内核中实时时钟芯片pcf85263的驱动源码在哪里
答:drivers/rtc/rtc-pcf85263.c,内核配置选项为 CONFIG_RTC_DRV_PCF85263 Location: -> Device Drivers -> Re ...
- Linux后台运行命令，nohup和&的区别
&的意思是在后台运行, 什么意思呢? 意思是说, 当你在执行 ./a.out & 的时候, 即使你用ctrl C, 那么a.out照样运行(因为对SIGINT信号免疫). 但是要注 ...