原生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、jsonp
转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- [javascript]原生js实现Ajax
一.首先看JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, err ...
- js中使用进行字符串传参
在js中拼接html标签传参时,如果方法参数是字符串需要加上引号,这里需要进行字符转义 <a href='javascript:addMenuUI("+"\"&qu ...
- ajax的data传参的两种方式
ajax的data传参的两种方式 本文为转载. 1.[javascript] view plain copy /** * 订单取消 * @return {Boolean} 处理是否成功 */ func ...
- 使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
随机推荐
- 【JS】【6】判断一个元素是否在数组中
摘要: 有三种方式: 1,jquery的inArray方法 2,数组的indexOf方法 3,普通的for循环方法 正文: 1,jquery的inArray方法 /** * @param {Objec ...
- pycharm import scrapy 报错,No module named 'scrapy'
本地通过下载 pip install scrapy安装成功后,在pychram里面 import scrapy报错 后来在找了各种解决方法,重装wheel,twisted,都不行,最后发现是需要改Pr ...
- vue 自定义组件使用v-model
<input v-model="something"> v-model指令其实是下面的语法糖包装而成: <input :value="something ...
- 兼容 Spring Boot 1.x 和 2.x 配置类参数绑定的工具类 SpringBootBindUtil
为了让我提供的通用 Mapper 的 boot-starter 同时兼容 Spring Boot 1.x 和 2.x,增加了这么一个工具类. 在 Spring Boot 中,能够直接注入 XXProp ...
- centos6升级python
CentOS 6中,默认安装了Python 2.6.而pip,jupyter这样的常用工具是不支持Python 2.6的.为了使用这些工具,就必须将Python 2.6升级到Python 2.7以上的 ...
- oracle数据库SQL入门
1.oracle数据库的下载.安装.卸载 Oracle下载: Oracle下载链接地址:http://www.oracle.com/technetwork/cn/database/enterprise ...
- LeetCode 33 搜索旋转排序数组
题目: 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值,如果数组中存在这个 ...
- My SQL随记 002 登陆
如何启动MySQL服务 Step1 我的电脑右键属性找到 控制面板 选择 系统和安全 Step2 管理工具中找到服务 Step3 找到你的MySQL启动服务 如何通过黑窗口登陆退出 MySQL Ste ...
- 如何利用 LTE/4G 伪基站+GSM 中间人攻击攻破所有短信验证
这次公开课请来的嘉宾对自己的简介是: 连续创业失败的创业导师:伪天使投资人:某非知名私立大学创办人兼校长:业余时间在本校通信安全实验室打杂. 自从他在黑客大会上演讲<伪基站高级利用技术——彻底攻 ...
- DAY 13 开放封闭原则
装饰器: 即是用一个函数去拓展另一个函数,同时遵循开放封闭原则 开放封闭原则 对修改关闭,对拓展开放 不允许修改源代码以及调用方式 以下是无参函数的基本格式 def outer(func): def ...