原生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传参的更多相关文章

  1. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

  2. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  3. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  4. [javascript]原生js实现Ajax

    一.首先看JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, err ...

  5. js中使用进行字符串传参

    在js中拼接html标签传参时,如果方法参数是字符串需要加上引号,这里需要进行字符转义 <a href='javascript:addMenuUI("+"\"&qu ...

  6. ajax的data传参的两种方式

    ajax的data传参的两种方式 本文为转载. 1.[javascript] view plain copy /** * 订单取消 * @return {Boolean} 处理是否成功 */ func ...

  7. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  8. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  9. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

随机推荐

  1. 【JS】【6】判断一个元素是否在数组中

    摘要: 有三种方式: 1,jquery的inArray方法 2,数组的indexOf方法 3,普通的for循环方法 正文: 1,jquery的inArray方法 /** * @param {Objec ...

  2. pycharm import scrapy 报错,No module named 'scrapy'

    本地通过下载 pip install scrapy安装成功后,在pychram里面 import scrapy报错 后来在找了各种解决方法,重装wheel,twisted,都不行,最后发现是需要改Pr ...

  3. vue 自定义组件使用v-model

    <input v-model="something"> v-model指令其实是下面的语法糖包装而成: <input :value="something ...

  4. 兼容 Spring Boot 1.x 和 2.x 配置类参数绑定的工具类 SpringBootBindUtil

    为了让我提供的通用 Mapper 的 boot-starter 同时兼容 Spring Boot 1.x 和 2.x,增加了这么一个工具类. 在 Spring Boot 中,能够直接注入 XXProp ...

  5. centos6升级python

    CentOS 6中,默认安装了Python 2.6.而pip,jupyter这样的常用工具是不支持Python 2.6的.为了使用这些工具,就必须将Python 2.6升级到Python 2.7以上的 ...

  6. oracle数据库SQL入门

    1.oracle数据库的下载.安装.卸载 Oracle下载: Oracle下载链接地址:http://www.oracle.com/technetwork/cn/database/enterprise ...

  7. LeetCode 33 搜索旋转排序数组

    题目: 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值,如果数组中存在这个 ...

  8. My SQL随记 002 登陆

    如何启动MySQL服务 Step1 我的电脑右键属性找到 控制面板 选择 系统和安全 Step2 管理工具中找到服务 Step3 找到你的MySQL启动服务 如何通过黑窗口登陆退出 MySQL Ste ...

  9. 如何利用 LTE/4G 伪基站+GSM 中间人攻击攻破所有短信验证

    这次公开课请来的嘉宾对自己的简介是: 连续创业失败的创业导师:伪天使投资人:某非知名私立大学创办人兼校长:业余时间在本校通信安全实验室打杂. 自从他在黑客大会上演讲<伪基站高级利用技术——彻底攻 ...

  10. DAY 13 开放封闭原则

    装饰器: 即是用一个函数去拓展另一个函数,同时遵循开放封闭原则 开放封闭原则 对修改关闭,对拓展开放 不允许修改源代码以及调用方式 以下是无参函数的基本格式 def outer(func): def ...