实现ajax的异步调用代码

html的部分:

请输入序号:<input type="text" id="keyword">
<button type="button" id="refer">查询</button>
<p id="content"></p>
<p style="font-weight: bold;">新建员工</p><br/>
员工姓名:<input id="newname"/><br/>
员工编号:<input id="newnumber"/><br/>
员工性别:<select id="newsex">
<option value="男">男</option>
<option value="女">女</option>
</select><br/>
员工职位:<input id="newjob"><br/>
<button type="button" id="save">保存</button><br/>
<p id="contents"></p>


js的部分:

<script>
 document.getElementById("refer").οnclick=function(){
 var request =new XMLHttpRequest();
 request.open("GET","serverData.php?number="+document.getElementById("keyword").value);
 request.send();
 request.onreadystatechange=function(){
 if(request.readyState===4){
 if(request.status===200){
 document.getElementById("content").innerHTML=request.responseText;
 }else{
 alert("出现"+request.status+"错误");
 }
 }
 }
 }

 document.getElementById("save").οnclick=function(){
var request=new XMLHttpRequest();
 request.open("POST","serverData.php");
 var data="name="+document.getElementById("newname").value+
 "&number="+document.getElementById("newnumber").value+
 "&sex="+document.getElementById("newsex").value+
 "&job="+document.getElementById("newjob").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("contents").innerHTML=request.responseText;
 }else {
 alert("出现"+request.status+"错误");
 }
 }
 }
 }

<script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值