zoukankan      html  css  js  c++  java
  • ajax如何get传参!

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    span {
    border: 1px solid black;
    padding: 0 40px;
    }
    </style>
    </head>

    <body>
    <div id="box">
    <input type="text" id="mytxt"><span id="veriEle">2340</span>
    <button id="btn">验证</button>
    </div>
    <script>
    function loadVeri() {
    ajax的get传参
    var xhr = null;
    try {
    xhr = new XMLHttpRequest()
    } catch (err) {
    xhr = new ActiveXObject("Microsoft.XML")
    }
    调用open方法
    ?action=verification
    ajax的get传参 在地址栏传参 安全性低
    数据量大小有限制 不同浏览器不同 一般4KB左右
    传参action=verification
    xhr.open("get", "http://127.0.0.1:3000/VueHandler/AdminLoginAndRegHandler?action=verification", true)
    发送请求
    xhr.send()
    等待数据返回
    xhr.onreadystatechange = function () {
    if (xhr.status == 200 && xhr.readyState == 4) {
    console.log(xhr.responseText)
    var veri = JSON.parse(xhr.responseText)
    console.log(veri)
    if (veri.success) { 渲染验证码
    var veriEle = document.getElementById("veriEle");
    veriEle.innerHTML = veri.data;
    }

    }
    }
    }
    loadVeri()
    校验验证码
    var btn = document.getElementById("btn");
    btn.onclick = function () {
    var mytxtVal = document.getElementById("mytxt").value;输入框中的验证码
    var xhr = null;
    try {
    xhr = new XMLHttpRequest()
    } catch (err) {
    xhr = new ActiveXObject("Microsoft.XML")
    }
    调用open用get方式 把验证码传递给后台
    xhr.open("get", "http://127.0.0.1:3000/VueHandler/AdminLoginAndRegHandler?action=checkVerification&veri=" + mytxtVal, true)
    调用send
    xhr.send()
    等待数据返回
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(JSON.parse(xhr.responseText))
    }
    }
    }


    </script>

  • 相关阅读:
    codevs 3160 最长公共子串(SAM)
    noi2018d2t1
    后缀自动机
    [Scoi2014]方伯伯的玉米田
    【NOI2017】泳池
    【BZOJ2560】串珠子
    POJ 1737 统计有n个顶点的连通图有多少个 (带标号)
    【BZOJ3590】[Snoi2013]Quare 状压DP
    【BZOJ1095】【ZJOI2007】捉迷藏 [动态点分治]
    BZOJ1316: 树上的询问
  • 原文地址:https://www.cnblogs.com/dashenba/p/14156992.html
Copyright © 2011-2022 走看看