湛江网站建设常用到的前后端数据交互方法ajax()

作者:admin 发布时间:2019-09-13 17:08:20 浏览:768次
最近忙得转圈圈,趁着中秋有点空余时间,安安静静的写下这篇文章,以表我敬业之心~ 在信息网络爆发的时代,无乱是做网站还是做简单的H5活动页都离不开前后端交互,所以一个优秀的前端攻城狮,怎么才能及时的拿到后端返回的数据是一门必修课! 前后端数据交互方法常用到的是ajax,这个方法挺好用的,可惜对于SEO来说是致命的,因为这是异步请求,搜索引擎是无法抓取到页面的内容的,所以说这个方法是让人又爱又恨! 所以通常做网站要注重seo的,一般主要的内容都是用php直接渲染,对于不重要的内容,可以延迟加载的内容一般用ajax,比如大家常见的滑动加载~ 最近小超越也经常接触到各种各样的H5活动页需求开发,这类页面讲究的快速开发,快速扔掉,所以根本不需要考虑到seo。这时候用ajax来和后端交互就比较便捷了!今天小超越工作室为大家分享一下ajax。 原生的ajax方法太过繁杂,推荐大家直接使用jquery提供的ajax方法来使用,简单,好用! 湛江网站建设常用到的前后端数据交互方法

jquery提供的ajax方法包括

$.ajax() $.load() $.get() $.getJSON() $.post() jquery提供的ajax每种函数都有相应的用法,针对每种情况进行合理使用,可以达到快速开发的目的!

一、$.ajax()

ajax() 方法用于执行 AJAX(异步 HTTP)请求。 query ajax的调用方式:jquery.ajax(url,[settings]),因为实际使用过程中经常配置的并不多,所以这里并没有列出所有参数,甚至部分参数默认值,就是最佳实践,根本没必要去自己定义,除非有特殊需求,如果需要所有参数,可以查看jquery api 在实际开发的过程中,我们其实用得最多的就是通过ajax来进行get获取数据,和使用post方法来提交数据!所以一般通过以下的参数配置即可! $.ajax({ type: "GET",//请求方式 "POST" 或 "GET", 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 url: "page.php", dataType:'json',//根据返回数据类型可以有这些类型可选:xml html script json jsonp text data: {id:1001},//发送到服务器的数据,可以直接传对象{a:0,b:1},如果是get请求会自动拼接到url后面,如:&a=0&b=1 success: function(data){ console.log("返回的数据: " + data ); } //请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。 //如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout", "error", "notmodified" 和 "parsererror"。 error:function(XMLHttpRequest, textStatus, errorThrown){ // 通常 textStatus 和 errorThrown 之中 // 只有一个会包含信息 // this 调用本次AJAX请求时传递的options参数 }, //请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述成功请求类型的字符串 complete:function(XMLHttpRequest, textStatus) { //this 调用本次AJAX请求时传递的options参数 }, }); $.ajax({ type: "POST", url: "page.php", dataType:'json', data: {name:"张三",sex:1},//也可以是字符串链接"name=张三&sex=1",建议用对象 success: function(data){ //实际操作的时候,返回的json对象中可能会有成功错误的判断标记,所以可能也需要判断一下 console.log("返回的数据: " + data ); } });

二、$.load()方法

如果你没有特殊的需求,这种方法就简洁多了,load() 方法从服务器加载数据,并把返回的数据放置到指定的元素中。 用法 $("div").load(url,data,function(response,status,xhr)) url-请求的连接 data-添加在连接上的请求参数 response - 包含来自请求的结果数据 status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror") xhr - 包含 XMLHttpRequest 对象

三$.get()

如果是要使用get请求可以直接使用这种方法,就很简洁。 其实就是对ajax的二次封装,大家可以对照ajax的底层api //$.get("请求url","发送的数据对象","成功回调","返回数据类型"); $.get("test.php",{ name: "xiaochaoyue", url: "zhe94.com" }, function(data){ alert("Data Loaded: " + data); },'json');

三$.post()

其实和上面的get一样 //$.post("请求url","发送的数据对象","成功回调","返回数据类型"); $.post("test.php",{ name: "xiaochaoyue", url: "zhe94.com" }, function(data){ alert("Data Loaded: " + data); },'json');

四$.getJSON()

其实就是get方法返回的josn数据,不需要再进行二次转码,可以直接使用对象取数据 $.getJSON("test.php",{ name: "xiaochaoyue", url: "zhe94.com" }, function(data){ alert("Data Loaded: " + data.name); },'json'); 好了,以上就是网站建设常用到的前后端数据交互的方法,相信你只要稍微练习一下就能很好的掌握了!

如需转载请保留本文出处: https://zhe94.com/559.html

上一篇:快速建站之前言:如何建立一个自己的网站
下一篇:前端流行框架,Vue与React有什么区别,哪个更适合学习?