jQuery实现对ajax的封装，使代码轻量化

AJAX—$.get()

$.get()是一个简单的 GET 请求功能。请求成功时可调用回调函数。

$.get(url,[data],[callback],[type])

url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default

注意：请求是通过 URL 提交的提交有大小限制（2KB）

AJAX— $.post()

这是一个简单的 POST 请求功能。请求成功时可调用回调函数

$.post(url,[data],[callback],[type])

url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default

POST 请求是 HTTP 消息实体提交的，提交大小不受限制

$("#testform").serialize() 请求发送表单数据

<script type="text/javascript">function subform() {//subform获得account和password打印进去的数据var account = document.getElementById("accountId").value;var password = document.getElementById("passwordId").value;//使用XMLHttpRequest对象发起异步请求var xmlHttpRequest = new XMLHttpRequest();//建立与服务器的连接xmlHttpRequest.open("post", "demourl", true);//设置请求的头信息xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置提交数据的格式的请求头//发送请求xmlHttpRequest.send("account=" + account + "&password=" + password);// 接收服务器端响应后来的数据，当发送请求之后，就会触发nreadystatechange// 的这个事件，在此事件的回调函数中，获取响应的内容xmlHttpRequest.onreadystatechange = function () {//当对象就绪状态为为4，http响应状态码为200时获取响应内容//如果不写就绪状态的话，就会获取readystate中的2,3,4依次执行一遍//http响应就绪码，是为了确保这个响应过来的码是正确的就才能执行if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {//从后端响应回来一个json格式的字符串，在前端需要将其转换为JavaScript对象//通过使用jQuery缩短代码量来把responseText封装为JavaScript的对象var obj = $.parseJSON(xmlHttpRequest.responseText);//方便前端操作if (obj.id != null) {alert("操作成功html");//将对象直接存储到了当前浏览器当中window.sessionStorage.setItem("user",xmlHttpRequest.responseText );location.replace("success.html");//然后跳转页面来进行} else if (xmlHttpRequest.responseText == 1){alert("服务器忙html")}}}}</script>

使用jQuery封装后就可以写成：

<script type="text/javascript">function subform() {//jQuery封装的ajax请求，post就是表示的post请求，get就表示是get请求//$.post("demourl",{accout:$("accountId").val(),password:$("passwordId").val()});//$("#formId").serialize()  就是将表单数据序列化 为 键=值&键=值&键=值...//function(){} 读取到响应内容后执行//type：json 直接将返回的json格式转为js的对象。方便前端操作$.post("demourl", $("#formId").serialize(), function (res) {//方便前端操作var obj = $.parseJSON(res)if (obj.id != null) {alert("操作成功html");//将对象直接存储到了当前浏览器当中window.sessionStorage.setItem("user", res);location.replace("success.html");//然后跳转页面来进行} else if (obj == 1) {alert("服务器忙html")}},);}</script>

用json数据前后的交互

jQuery封装ajax相关推荐

用jQuery封装的Ajax把json数据展示到页面中去
实现一个聊天页面我们下来看一下效果图中的聊天信息先把它放在json数据中,通过jQuery封装的Ajax来把数据拿过来,再把它展示到页面中去,分为以下几步为了方便操作,我们直接使用php stu ...
jquery的ajax()方法与生命周期
getScript()和getJSON(): jquery封装AJAX的最顶层,用于特定情况下的使用. 有三个参数,与$.get()和$.post()方法,前三个参数相同.getScript()在需要 ...
jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){/*** ...
Promise 的基本使用与 Ajax的jQuery封装
Promise 的基本使用为了解决回调地狱问题,从而给出的解决办法: /*** Promise** 1. Promise 是一个构造函数 new Vue()* 2. Promise() 里面有个参 ...
封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{// type:"get"/"post", // dataTy ...
JQuery封装的ajax方法
JQuery封装的ajax方法 JQuery封装的ajax优势:简单方便,已做好浏览器兼容性处理. 1.$.post方法 $.post(url[,data][,callback][,type]) ...
Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
jquery封装的ajax方法获取web服务器时间
解决方案: Ajax HTTP Head法原理: 一般服务器在发送静态页面的时候(apache, nginx, lighttpd就目前所知)都是会在 HTTP 头里带一个Date的头信息的,那么我用 ...
ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...

jQuery封装ajax

jQuery实现对ajax的封装，使代码轻量化

AJAX—$.get()

AJAX— $.post()

jQuery封装ajax相关推荐

最新文章

热门文章