原生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. [lightoj P1151] Snakes and Ladders

    1151 - Snakes and Ladders Time Limit: 2 second(s)    Memory Limit: 32 MB 'Snakes and Ladders' or 'Sh ...

  2. （02） 第一个springboot程序

    1. 创建一个springboot程序 1. idea 自带的springboot插件 2. 直接从https://start.spring.io 创建好程序下载下来, 之后覆盖你的创建的项目 2. ...

  3. rest_framework 之视图

    1. 继承ModelSerilizer,直接指定要序列化的表模型 MySerializers.py from app import models # 继承ModelSerilizer,直接指定要序列化 ...

  4. Vue(二) 计算属性

    模板内的表达式常用于简单的运算,当过长或逻辑复杂时,难以维护,计算属性就是解决该问题的 什么是计算属性 表达式如果过长,或逻辑更为复杂,就会变得臃肿甚至难以维护,比如: <div> {{ ...

  5. python全栈开发笔记---------数据类型****整理****

    一.数字 int(..) 二.字符串 replace/find/join/strip/startswith/split/upper/lower/format tempalet ='i am {name ...

  6. Mysql服务配置优化

    mysql服务器优化包含 硬件优化.操作系统配置优化(cpu调度.网络.内存.虚拟内存.磁盘io).Mysql服务配置优化(最大连接数.表缓存等.存储引擎).表结构优化.索引优化 总共5个方面. 本片 ...

  7. Android开发 ---基本UI组件7 ：分页功能、适配器、滚动条监听事件

    效果图: 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding="utf-8"?> ...

  8. $_SERVER['HTTP_REFER'] 和 session cookie 关系

    对Session和Cookie的区分与理解 先说session 对SESSION的争论好象一直没有停止过,不过幺麽能理解SESSION的人应该占90以上.但还是讲讲,别嫌老~ 有一些人赞成用SESSI ...

  9. GoogLeNet 改进之 Inception-v2/v3 解读

    博主在前一篇博客中介绍了GoogLeNet 之 Inception-v1 解读中的结构和思想.Inception的计算成本也远低于VGGNet.然而,Inception架构的复杂性使得更难以对网络进行 ...

  10. 姿势估计实验-Realtime_Multi-Person_Pose_Estimation-CMU

    前言: 论文及源代码网址: https://github.com/ZheC/Realtime_Multi-Person_Pose_Estimation 地址2: https://github.com/ ...