这两天,有朋友要我给他做一个提交数据的页面,要求不要刷新页面进行提交,而且只要能够将数据录入数据库就行,这要求很简单,想着这无非就是异步提交么,花了点时间写了一段js,效果是实现了,采用的是引入Jquery库,调用封装好的ajax,很简单,以下附上代码:
Jquery下的ajax
$.ajax({ url:'/index.php?g=User&m=Post&a=insert', type:'POST', //GET async:true, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text beforeSend: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('结束') } })
这是较为复杂的一种写法,其中jquery库中还封装了几种简单的写法和众多的参数,这里就不一一阐述了,有兴趣的小伙伴可以自己去度娘以下,以下介绍原生js中的ajax使用方法
原生js下的ajax
$('#sendData').click(function(){ //请求的5个阶段,对应readyState的值 //0: 未初始化,send方法未调用; //1: 正在发送请求,send方法已调用; //2: 请求发送完毕,send方法执行完毕; //3: 正在解析响应内容; //4: 响应内容解析完毕; //创建 - 非IE6以下版本,兼容各种主流浏览器 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } var data = 'name=nice'; 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); //发送 });
这个原生ajax相对于jquery库中的ajax来说,就是无需引入jquery库,直接写代码就行,但是写的代码就有点多了,为了方便可以自己封装一个类似于jquery库中的ajax,代码如下:
ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { // 此处放成功后执行的代码 }, fail: function (status) { // 此处放失败后执行的代码 } }); function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); //创建 - 非IE6 - 第一步 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //接收 - 第三步 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML); } else { options.fail && options.fail(status); } } } //连接 和 发送 - 第二步 if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } //格式化参数 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".","")); return arr.join("&"); }
以上就是原生ajax与jquery库ajax的使用方法,大神请绕路,谢谢!!!
本文只提供方法,不作各种参数解释,因为解释起来,我自己也不晓得在说啥,哈哈哈哈,爽歪歪,又水了一篇文章。
评论列表 :共有4人吐槽, 8573人围观