js get和post请求实现代码解析

2024-05-06 15:44:09

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了js get和post实现代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1、get

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>  <title>Title</title>  <script type="text/javascript">    function checkusername() {      // 1.获取ajax引擎      var xhr = getXHR();      // 2.调用open方法准备发送      var url = 'checkUsername_ajax?username='+document.getElementById('username').value;      console.log(url);      xhr.open('get',url,true);      // 3.发送请求      xhr.send();      // 4.指定回调函数      xhr.onreadystatechange = function () {        // readystate是4并且status是200        if(xhr.readyState == 4 && xhr.status == 200){          document.getElementById("msg").innerHTML = xhr.responseText;        }      };    }        function getXHR() {      if(window.XMLHttpRequest)      {        return new window.XMLHttpRequest();      } else {        return new window.ActiveXObject("Microsoft.XMLHTTP");      }    }  </script></head><body>  <form action="" method="get">    <input type="text" name="username" id="username" onblur="checkusername()"/><br/><div id="msg"></div>    <input type="text" name="address"/><br/>    <input type="submit" value="login"/><br/>  </form></body></html>

2、post

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>  <title>Title</title>  <script type="text/javascript">    function checkusername() {      // 1.获取ajax引擎      var xhr = getXHR();      // 2.调用open方法准备发送      xhr.open('post','checkUsername_ajax',true);      // 3.发送请求 (多个参数使用&符号连接)      // xhr.send('username='+document.getElementById('username').value+'&address=nj');      xhr.send('username='+document.getElementById('username').value);      // 4.指定回调函数      xhr.onreadystatechange = function () {        // readystate是4并且status是200        if(xhr.readyState == 4 && xhr.status == 200){          document.getElementById("msg").innerHTML = xhr.responseText;        }      };    }        function getXHR() {      if(window.XMLHttpRequest)      {        return new window.XMLHttpRequest();      } else {        return new window.ActiveXObject("Microsoft.XMLHTTP");      }    }  </script></head><body>  <form action="" method="get">    <input type="text" name="username" id="username" onblur="checkusername()"/><br/><div id="msg"></div>    <input type="text" name="address"/><br/>    <input type="submit" value="login"/><br/>  </form></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持错新站长站。

上一篇：Vue路由管理器Vue-router的使用方法详解

下一篇：Windows下安装 node 的版本控制工具 nvm