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

2024-12-01 22:18:15

这篇文章主要介绍了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>

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

nodejs之get/post请求的几种方式小结

最近一段时间在学习前端向服务器发送数据和请求数据,下面总结了一下向服务器发送请求用get和post的几种不同请求方式: 1.用form表单的方法: (1)get方法前端代码: <form action = "/login" method = "GET"> <label for = "username">账号:</label> <input type = "text" name =&q
angularJS 发起$http.post和$http.get请求的实现方法

AngularJS发起$http.post请求代码如下: $http({ method:'post', url:'post.php', data:{name:"aaa",id:1,age:20} }).success(function(req){ console.log(req); }) 这时候你会发现收不到返回的数据,结果为null,这是因为要转换成form data. 解决方案: 配置$httpProvider: var myApp = angular.module('app',
nodejs使用express获取get和post传值及session验证的方法

本文实例讲述了nodejs使用express获取get和post传值及session验证的方法.分享给大家供大家参考,具体如下: 获取get和post传值 get的传值被放入了一个对象中 req.query post的传值被放入了 req.body 获取方式如获取对象的内容方式一样.比如,前面传入了一个id的值,nodejs获取就可以req.body.id即可 express的session验证第一步安装cookie和session的模块,并引入 var session = require('
vue基础之使用get、post、jsonp实现交互功能示例

本文实例讲述了vue基础之使用get.post.jsonp实现交互功能.分享给大家供大家参考,具体如下: 一.如果vue想做交互,引入: vue-resouce 二.get方式 1.get获取一个普通文本数据: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>
AngularJS发送异步Get/Post请求方法

1.在页面中加入AngularJS并为页面绑定ng-app 和 ng-controller <body ng-app="MyApp" ng-controller="MyCtrl" > ... <script src="js/angular.min.js"></script> <script src="js/sbt.js"></script> 2.添加必要的控件并绑定相
asp.net使用JS+form表单Post和Get方式提交数据

最近工作中用到了一种使用JS+form用post方式上传文件一种方式.前台用Html input,使用JS方式往服务器上传文件,具体实现看代码: 前台页面使用aspx网页,使用input 标签,用其file类型:此标签不使用runat="server".不使用服务器控件:这里需要加上一个iframe标签.并隐藏:设置一a标签.用来作为用户点击按钮:调用JS函数:Uploadfun(); <div> <input type="file" id=&qu
vuejs使用axios异步访问时用get和post的实例讲解

script中. let data={....}; let url=xx; 方法各异: GET: this.$ajax.get(url,{ params:data }) .then(function (res) { console.log(res.data) }) .catch(function (error) { console.log(error) }) POST: 方法一:1. //请求后台数据之前转换入参 let url = xx; let data = { uname:this.una
nodejs 使用http进行post或get请求的实例(携带cookie)

安装http nmp install http 函数封装(可直接拿去进行使用) var http = require('http'); function nodePostGetRequest(HOST, PORT, method, bodydata, callBackFunction, path, cookie) { //把将要发送的body转换为json格式 var body = bodydata; var bodyString = JSON.stringify(body); //http 头
Node.js系列之发起get/post请求（2）

服务器与浏览器的交互主要方式有get/post请求. 下面,我们来看一下node.js发起get/post请求. 1.get 由于get请求的参数在url后面,所以相对比较简单.node.js中的url模块提供了parse函数来处理.具体代码如下: //引入模块 var http=require('http'); var url=require('url'); var util=require('util'); //创建http Server 处理请求 http.createServer(fun
js get和post请求实现代码解析

这篇文章主要介绍了js get和post实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.get <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script type="
js推箱子小游戏步骤代码解析

推箱子小游戏大家肯定都玩过,之所以写这篇文章,是觉得这个小游戏足够简单好理解 demo: 步骤解析: 本文代码已经放在了github上面了,里面也进行了很详细的代码注释,可以copy下来,在本地运行一下看看. 1. 渲染地图 html结构: html结构十分简单,只要弄一堆div,来放置地图的class就可以了,我这里初始化了12*9个div,地图里最多九行高度. 这些div都是同样大小,地图渲染出来区别的只是颜色的不同. 地图函数: var box=$('.box div'); //地图使用的
Node.js搭建WEB服务器的示例代码

前言这几天为了熟悉vue.js框架,还有webpack的使用,就准备搭建一个发布和浏览markdwon的简单WEB应用.原本是想着用bash脚本和busybox的httpd来作为后台服务,但是bash脚本解析和生成JSON非常不方便,而用Java语言写又觉得部署不方便,所以就想到了正在用到的Node.js,于是就有了这篇博文.(文末有本文代码的github地址) 简单例子首先,从搭建最简单的 Hello world 开始,建立以下目录.文件和内容. 建立项目及运行 project web-s
基于JS实现父组件的请求服务过程解析

这篇文章主要介绍了基于JS实现父组件的请求服务过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <template> <div class = 'car_list' reft='scrollobx' @scroll='scrollready($event)'> </div> </template> <script> export default { data() { return { le
原生 JS Ajax,GET和POST 请求实例代码

javascript/js的ajax的GET请求代码如下所示: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
JS 拦截全局ajax请求实例解析

你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!
JS模拟超市简易收银台小程序代码解析

废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> // 1.编写一个程序,计算增加后的工资.要求基本工资大于等于1000元,增加20%的工资;若小于1000元且大于等于800元,则增加15%,若小于800元,则增加10%工资. var basepay = parseInt(prompt("请输入您的工资:"));//初始工资 var pay1 = basepay+(basepay*0.2
利用js实现Ajax并发请求限制请求数量的示例代码

出现问题描述:当不确定异步请求个数时,为防止当一瞬间发生上百个http请求时,导致堆积了无数调用栈进而导致内存溢出问题. 要求:将同一时刻并发请求数量控制在3个以内,同时还要尽可能快速的拿到响应的结果. 同面试问题: 实现一个批量请求函数 multiRequest(urls, maxNum),要求如下: 要求最大并发数 maxNum 每当有一个请求返回,就留下一个空位,可以增加新的请求所有请求完成后,结果按照 urls 里面的顺序依次打出 1.基于Promise.all实现Ajax的串行和并行
JS可断点续传文件上传实现代码解析

刚开始学习前端开发就碰到文件上传问题,还要求可断点续传.查了很多资料,发现H5的file API刚好可以满足我们的需求,也遇到了一些问题,于是记录下来为有同样需求的朋友提供一些帮助. 一.首先,为了引入文件对象,需要在H5页面上放置一个file类型的输入标签. <input type="file" onchange="fileInfo()"> 当选择文件之后显示文件相关信息: function fileInfo() { let fileObj = doc
BootStrap fileinput.js文件上传组件实例代码

1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

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

相关推荐

随机推荐