原生js中用Ajax进行get传参

Posted Web引领者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js中用Ajax进行get传参相关的知识,希望对你有一定的参考价值。

  原生js中用Ajax进行get传参

  案例:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
        input{
          width: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展示出来;
?>

以上是关于原生js中用Ajax进行get传参的主要内容,如果未能解决你的问题,请参考以下文章

JS原生Ajax,GET和POST

原生JS--Ajax

原生 JS Ajax,GET和POST 请求实例代码

原生js实现ajax

js原生ajax请求get post笔记

原生js封装Ajax的GET请求