原生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. 数据结构与算法之PHP排序算法（希尔排序）

    一.基本思想 希尔排序算法是希尔排序,也称递减增量排序算法,是插入排序的一种更高效的改进版本. 该方法的基本思想是:先将整个待排元素序列分割成若干个子序列(由相隔某个“增量”的元素组成的)分别进行直接 ...

  2. Python学习——多线程，异步IO，生成器，协程

    Python的语法是简洁的,也是难理解的. 比如yield关键字: def fun(): for i in range(5): print('test') x = yield i print('goo ...

  3. 解决pycharm添加第三方包失败

    今天想用pycharm打开图像,但是import scipy的时候报错了,报错内容如下: from scipy.misc import imread Traceback (most recent ca ...

  4. jQuery获取包括当前元素的HTML

    1.获取当前元素内的HTML (1)方法一 $("#current").html(); (2)方法二 document.getElementById("current&q ...

  5. frameset，iframe框架之间如何互相调用变量、函数

    以往一直在编写的都是前台的UI,很少使用到frameset.iframe,对其了解也是十分有限,只是知道其可以为其当前页面引入html文件成为当前页的一部分,但是这两天在做后台UI界面的时候,发现这样 ...

  6. Win10系列：C#应用控件基础11

    RichEditBox控件 富文本格式是一种跨平台的文档格式,在这种格式的文档中可以编辑文本.图片.链接等内容.通过RichEditBox控件可以对富文本格式的文档进行编辑. 在XAML文件中,Ric ...

  7. php7安装 event扩展

    1 下载地址:http://pecl.php.net/package/event 2 安装支持库libevent,需要编译高版本(这里以最新版本release-2.1.8-stable为例) http ...

  8. RN环境的搭建

    RN技术详细了解: RN环境的搭建: 1.           首先安装node.js 2.           安装homebrew(网上内容很多自己找,详细的我就不多说了) (1)   在home ...

  9. OO课程中IDEA相关插件的使用

    写在前面   由于OO课程博客作业的需要分析代码的复杂度并绘制UML图,但是课件上推荐的分析工具(http://metrics.sourceforge.net )经过自己几个小时的折腾还是没有安装成功 ...

  10. Python中异常处理

    高级语言通常都配置了一套try...except...finally的错误处理机制. 1.我们先看一个try的机制 try: res=1/0except ZeroDivisionError as e: ...