jquery和原生js-ajax
form表单
$('#submit').click(function(){$('#form').serialize(); //会根据input里面的name,把数据序列化成字符串;eg:name=yang$('#form').serializeArray(); //会根据input里面的name,把数据序列化成数组;eg:[object]//注意:没有name会获取不到值//下面原生js的方法JSON.parse() //json字符串转化为json对象JSON.stringify() //json对象转化为json字符串
});
jq-完整ajax
$.ajax({url:'/comm/test1.php',type:'POST', //GETasync:true, //或false,是否异步data:{name:'yang',age:25},timeout:5000, //超时时间dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/textbeforeSend:function(xhr){console.log(xhr)console.log('发送前')},success:function(data,textStatus,jqXHR){console.log(data)console.log(textStatus)console.log(jqXHR)},error:function(xhr,textStatus){console.log('错误')console.log(xhr)console.log(textStatus)},complete:function(){console.log('结束')}
})
原生js-ajax
$('#send').click(function(){//请求的5个阶段,对应readyState的值//0: 未初始化,send方法未调用;//1: 正在发送请求,send方法已调用;//2: 请求发送完毕,send方法执行完毕;//3: 正在解析响应内容;//4: 响应内容解析完毕;var data = 'name=yang';var xhr = new XMLHttpRequest(); //创建一个ajax对象xhr.onreadystatechange = function(event){ //对ajax对象进行监听if(xhr.readyState == 4){ //4表示解析完毕if(xhr.status == 200){ //200为正常返回console.log(xhr)}}};xhr.open('POST','url',true); //建立连接,参数一:发送方式,二:请求地址,三:是否异步,true为异步xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //可有可无xhr.send(data); //发送
});
jq实际应用
$(function(){ $('#btn').click(function(){ var obj = $(this); //has_click 防止重复多次点击 var has_click = obj.attr('has-click'); if(has_click == '1'){ return; } obj.attr('has-click','1'); var url = ''; var content = ''; $.ajax({ type:'post', url:url, dataType:'json', data:{content:content}, beforeSend:function(){ obj.html('正在处理...'); },success:function(json){ if(json.code == '1'){ //成功 }else{ //出错 obj.html('操作按钮').attr('has-click','0'); } } }); }); });
转载于:https://www.cnblogs.com/webSong/p/6240528.html
jquery和原生js-ajax相关推荐
- 工作只用jquery,原生js知道就好了
前几天公众号有位小伙伴微信上问我说:听朋友说工作中全部用jquery,学好jquery,js只需要知道就好了,是这样的吗? 一听到这种的观点,我只想说:远离这样的朋友,简直误人子弟. 幸好这个公众号的 ...
- JQuery和原生JS遍历数组和对象的对比
目录 1 遍历数组 1.1 JQuery遍历数组 1.2 原生JS遍历数组 2 遍历对象 2.1 JQuery遍历对象 2.2 原生JS遍历对象 1 遍历数组 1.1 JQuery遍历数组 在JQue ...
- 原生js.ajax内存溢出,javascript - 代码点火器-如何使用jQuery向数据库提交ajax javascript对象 - 堆栈内存溢出...
我有一个要提交到我的codeigniter数据库的数据的javascript数组: [ { "name": "title", "value" ...
- 基于SpringBoot+Gradle+Zxing+JQuery(原生JS)开发条形码/二维码扫描工具,且采用原生JS调用浏览器摄像头
零. 近日在做课设的时候,碰到一个比较有趣的玩意.就是在应用上添加扫描二维码/条形码的技术. 下面,介绍一下本文采用的一些框架: SpringBoot+Gradle+JPA为框架的后端系统 JavaS ...
- 原生js.ajax内存溢出,【JS】解决内存溢出问题
首页 专栏 javascript 文章详情 0 解决内存溢出问题 comer发布于 27 分钟前 webpack 运行 npm run build 内存溢出 JavaScript heap out o ...
- 原生js ajax请求 post,原生js实现ajax 发送post请求
2019独角兽企业重金招聘Python工程师标准>>> var postData = { "name1": "value1", "n ...
- 原生JS 面试题 (基础)(概率大)
文章目录 1.面试题: 请描述一下 location.go(-1) 和 history.go(-1) 有什么区别 2.面试题:什么是 cookie? 如何回答! 3.面试题: 描述一下 cookie ...
- 原生js循环展示dom_web前端教程:JS高阶编程技巧-惰性函数
框架(framework)是一个框子--指其约束性,也是一个架子--指其支撑性.是一个基本概念上的结构,用于去解决或者处理复杂的问题. Web前端教程 框架这个广泛的定义使用的十分流行,尤其在软件概念 ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍JSON独立于语言,是一种与语言无关的数据格式.JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数 ...
最新文章
- python使用教程cmd啥意思-Python 中的cmd模块学习
- Linux文件大小排序
- linux双核对线程,Linux检查双核(及多核)CPU信息
- Lucene学习总结之三:Lucene的索引文件格式(1)
- java第二部分项目_Java_第二次作业:项目构思与实现
- JS中同名函数有效执行顺序
- 从集合大小的定义到数学结构-解决了多年的疑惑
- 北上广深的请注意,阿里聚安全来找你玩啦~
- jenkins ssh 部署 Can't connect to server 错误
- 21天Jmeter打卡Day17 后置处理器_JSON_正则表达式_边界提取器_完成删除场景模拟测试
- 解决Spring MVC整合Shiro出现无法访问静态资源文件的问题
- 如何更改电脑开机密码
- 电子元器件如何检测和筛选
- 河北计算机应用对口升学,2019年河北省中等职业学校对口升学考试:计算机文化基础+计算机应用基础模拟试卷...
- VBA编程_常用函数总结1
- matlab做简单的信号处理分析
- Linux 时间戳获取及转换
- 鸿蒙系统安装电视家,华为荣耀智慧屏系统更新,支持安装第三方APP,网友:华为妥协了...
- Java中的判断语句
- flutter无法抓包
热门文章
- C++为什么空格无法输出_数据的输入输出举例
- mybatis 一对多_MyBatis面试题集合,90%会遇到这些问题
- 威纶通宏开机后使用初始化宏指令_【操作系统】我们按下电脑开机键的背后发生了什么?...
- yum安装mysql后密码_Centos7:yum安装MySQL5.7后如何设置root密码
- python3.7.4安装教程桌面_Python 3.7.4 for Windows的安装
- input输入框为number类型时,去掉上下小箭头
- 基本数据结构(图: 基本结构,DFS,prim算法, kruskal算法)
- iOS 跑马灯之 TXScrollLabelView
- 数据千万条,备份第一条,数据找不回,老板两行泪
- 核方法---径向基函数网络