当前位置:首页>百宝箱>正文

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

发布时间:2019-09-13 17:08:20 作者:小超越君

最近忙得转圈圈,趁着中秋有点空余时间,安安静静的写下这篇文章,以表我敬业之心~

在信息网络爆发的时代,无乱是做网站还是做简单的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方法来提交数据!所以一般通过以下的参数配置即可!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$.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() 方法从服务器加载数据,并把返回的数据放置到指定的元素中。

用法

1
$("div").load(url,data,function(response,status,xhr))

url-请求的连接
data-添加在连接上的请求参数
response – 包含来自请求的结果数据
status – 包含请求的状态(”success”、”notmodified”、”error”、”timeout”、”parsererror”)
xhr – 包含 XMLHttpRequest 对象

三$.get()

如果是要使用get请求可以直接使用这种方法,就很简洁。
其实就是对ajax的二次封装,大家可以对照ajax的底层api

1
2
3
4
5
//$.get("请求url","发送的数据对象","成功回调","返回数据类型");
$.get("test.php",{ name: "xiaochaoyue", url: "zhe94.com" },
   function(data){
      alert("Data Loaded: " + data);
},'json');

三$.post()

其实和上面的get一样

1
2
3
4
5
//$.post("请求url","发送的数据对象","成功回调","返回数据类型");
$.post("test.php",{ name: "xiaochaoyue", url: "zhe94.com" },
   function(data){
      alert("Data Loaded: " + data);
},'json');

四$.getJSON()

其实就是get方法返回的josn数据,不需要再进行二次转码,可以直接使用对象取数据

1
2
3
4
$.getJSON("test.php",{ name: "xiaochaoyue", url: "zhe94.com" },
   function(data){
      alert("Data Loaded: " + data.name);
},'json');

好了,以上就是网站建设常用到的前后端数据交互的方法,相信你只要稍微练习一下就能很好的掌握了!

文章内容欢迎转载,请保留本文链接:https://www.zhe94.com/559.html

专注高端湛江网站建设及湛江SEO优化服务 立即咨询