zoukankan      html  css  js  c++  java
  • 原生js中用Ajax进行get传参

      原生js中用Ajax进行get传参

      案例:

      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <title></title>
          <style>
            input{
              600px;
              height:50px;
              display:block;
            }
          </style>
        </head>
        <body>
          <input type="text" name="id" id="id" value="3"/>
          <input type="text" name id="text" value="zhangsan"/>
          <input type="text" nane="money" id="money" value="1000"/>
          <input type="text" name="bumen" id="bumen" value="web"/>
        </body>
      </html>
      <script>
        //用原生写;
        //首先,Ajax;封装版  get方式
        function ajax(medth,url,fn,data){
          var xmlhttp=new XMLHttpRequest;
          xmlhttp.open(medth,url+"?"+data,true);             //url  和  data要是字符串  ,但是必须是传值时是字符串,这里是变量url data   所以用+拼接起来,中间用必须?连接起来
          xmlhttp.send();
          xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
              fn(xmlhttp.responseText);
            }
          }
        }
        function $(name){
          return document.getElementById(name);
        }
        var so=$("id").value;              // 获取表单的值
        var ss=$("text").value;
        var mo=$("money").value;
        var bu=$("bumen").value;
        var js="id="+so+"&name="+ss+"&money="+mo+"&bumen="+bu;        //传数据的格式;(不管get还是post通用)   &符   表示and的意思    js要是字符串   所以可以用+进行字符串拼接;
        console.log(js); 
        ajax("get","http://192.168.43.229:8088/seven/4.12/admin/02.php",mn,js);
        function mn(data){
          console.log(data);                               //在php中获取的数据
        }
      </script> 

      <?php
        $so=$_GET['id'];    //用get获取id的字段    与js中的id一致; 

        $ss=$_GET['name'];
        $mo=$_GET['money'];
        $bu=$_GET['bumen'];
        $arr=[];
        array_push($arr,$so,$ss,$mo,$bu);            //将他们放在数组里
        var_dump($arr);              //只能用var_dump展示出来;
    ?>

  • 相关阅读:
    使用百度字体编辑器删除不必要字体,减少字体文件体积
    使用npm安装webpack失败时,可能被墙要为cmd命令行设置代理
    让字体图标代替雪碧图,减少请求带宽
    隐藏浏览器原生的滚动条
    台式机安装CentOS7.6 Minimal ISO系统并增加图形化桌面
    像我这样笨拙地生活(廖一梅)--节选
    随心随意亦舒经典语录
    file / from install of XXX conflicts with file from package filesystem-XXX
    nginx代理php项目的websocket
    Redis4配置文件详解
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10699772.html
Copyright © 2011-2022 走看看