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展示出来;
    ?>

  • 相关阅读:
    Linux 下 的 Oracle,如何安装 tnsname
    checkpoint process vs writer process vs wal writer process
    PostgreSQL的checkpoint能否并行
    PostgreSQL参数学习:wal_keep_segments
    PostgreSQL参数学习:vacuum_defer_clean_age
    PostgreSQL参数学习:max_wal_senders
    对PostgreSQL数据库的hstore类型建立GisT索引的实验
    PostgreSQL的hstore初步学习
    乐鑫esp8266基于freeRtos实现私有服务器本地远程OTA升级
    Android 6.0 超级简单的权限申请2 (Permission)
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10699772.html
Copyright © 2011-2022 走看看