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相关推荐

  1. 工作只用jquery,原生js知道就好了

    前几天公众号有位小伙伴微信上问我说:听朋友说工作中全部用jquery,学好jquery,js只需要知道就好了,是这样的吗? 一听到这种的观点,我只想说:远离这样的朋友,简直误人子弟. 幸好这个公众号的 ...

  2. JQuery和原生JS遍历数组和对象的对比

    目录 1 遍历数组 1.1 JQuery遍历数组 1.2 原生JS遍历数组 2 遍历对象 2.1 JQuery遍历对象 2.2 原生JS遍历对象 1 遍历数组 1.1 JQuery遍历数组 在JQue ...

  3. 原生js.ajax内存溢出,javascript - 代码点火器-如何使用jQuery向数据库提交ajax javascript对象 - 堆栈内存溢出...

    我有一个要提交到我的codeigniter数据库的数据的javascript数组: [ { "name": "title", "value" ...

  4. 基于SpringBoot+Gradle+Zxing+JQuery(原生JS)开发条形码/二维码扫描工具,且采用原生JS调用浏览器摄像头

    零. 近日在做课设的时候,碰到一个比较有趣的玩意.就是在应用上添加扫描二维码/条形码的技术. 下面,介绍一下本文采用的一些框架: SpringBoot+Gradle+JPA为框架的后端系统 JavaS ...

  5. 原生js.ajax内存溢出,【JS】解决内存溢出问题

    首页 专栏 javascript 文章详情 0 解决内存溢出问题 comer发布于 27 分钟前 webpack 运行 npm run build 内存溢出 JavaScript heap out o ...

  6. 原生js ajax请求 post,原生js实现ajax 发送post请求

    2019独角兽企业重金招聘Python工程师标准>>> var postData = { "name1": "value1", "n ...

  7. 原生JS 面试题 (基础)(概率大)

    文章目录 1.面试题: 请描述一下 location.go(-1) 和 history.go(-1) 有什么区别 2.面试题:什么是 cookie? 如何回答! 3.面试题: 描述一下 cookie ...

  8. 原生js循环展示dom_web前端教程:JS高阶编程技巧-惰性函数

    框架(framework)是一个框子--指其约束性,也是一个架子--指其支撑性.是一个基本概念上的结构,用于去解决或者处理复杂的问题. Web前端教程 框架这个广泛的定义使用的十分流行,尤其在软件概念 ...

  9. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  10. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍JSON独立于语言,是一种与语言无关的数据格式.JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数 ...

最新文章

  1. python使用教程cmd啥意思-Python 中的cmd模块学习
  2. Linux文件大小排序
  3. linux双核对线程,Linux检查双核(及多核)CPU信息
  4. Lucene学习总结之三:Lucene的索引文件格式(1)
  5. java第二部分项目_Java_第二次作业:项目构思与实现
  6. JS中同名函数有效执行顺序
  7. 从集合大小的定义到数学结构-解决了多年的疑惑
  8. 北上广深的请注意,阿里聚安全来找你玩啦~
  9. jenkins ssh 部署 Can't connect to server 错误
  10. 21天Jmeter打卡Day17 后置处理器_JSON_正则表达式_边界提取器_完成删除场景模拟测试
  11. 解决Spring MVC整合Shiro出现无法访问静态资源文件的问题
  12. 如何更改电脑开机密码
  13. 电子元器件如何检测和筛选
  14. 河北计算机应用对口升学,2019年河北省中等职业学校对口升学考试:计算机文化基础+计算机应用基础模拟试卷...
  15. VBA编程_常用函数总结1
  16. matlab做简单的信号处理分析
  17. Linux 时间戳获取及转换
  18. 鸿蒙系统安装电视家,华为荣耀智慧屏系统更新,支持安装第三方APP,网友:华为妥协了...
  19. Java中的判断语句
  20. flutter无法抓包

热门文章

  1. C++为什么空格无法输出_数据的输入输出举例
  2. mybatis 一对多_MyBatis面试题集合,90%会遇到这些问题
  3. 威纶通宏开机后使用初始化宏指令_【操作系统】我们按下电脑开机键的背后发生了什么?...
  4. yum安装mysql后密码_Centos7:yum安装MySQL5.7后如何设置root密码
  5. python3.7.4安装教程桌面_Python 3.7.4 for Windows的安装
  6. input输入框为number类型时,去掉上下小箭头
  7. 基本数据结构(图: 基本结构,DFS,prim算法, kruskal算法)
  8. iOS 跑马灯之 TXScrollLabelView
  9. 数据千万条,备份第一条,数据找不回,老板两行泪
  10. 核方法---径向基函数网络