【Html5 实现数据交互】浅析使用Ajax 实现数据交互

最新推荐文章于 2021-06-16 21:42:07 发布

weixin_33739541

最新推荐文章于 2021-06-16 21:42:07 发布

阅读量277

点赞数 1

文章标签：移动开发 python json

原文链接：https://juejin.im/post/5a336dcdf265da431f4b1f46

版权

前言

很早就想写了的，一直拖啊拖，现在碰巧有时间，就来记录一下对Ajax 的浅析理解吧。

在继续写下来的时候，我们首先要简单理解这么写问题。ajax 是什么？用来有什么用？怎么使用？使用的时候我们应该注意些什么？

1、 Ajax 是什么？

相信如果要实现一个应用前后端的数据交互，使之后台数据反馈显示在前端页面，如果你接触到的移动端Android 的话，你会知道HttpConnection ，那么如果是前端 Html5，那么你就会接触到Ajax了。

作用就是用于把后台通过http封装好的数据存储在URI读取数来数据。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。以上是W3cSchool 里面说的。简单的来说：你可以用Ajax获取接口数据，实现与后台数据共通

2、Ajax如何使用？

说到他的使用，无非也就是它的代码如何如何使用。使用的话，你首先要有一个接口数据。哈哈哈哈。其他好像也没有什么注意的了，就是你自己必须注意你自己的是什么类型的接口数据。比如 json 还是 xml ... 等等之类的。还有异步还是同步。有空我会写一篇关于异步同步的文章给自己也巩固一下。代码如下，简单封装一下（我使用的是jquery封装好的，好吧这可以延伸出js和jquery的对象操作了）

//实现一个接口 (异步)
function ajax_get_async(url, data, callback, errorcb) {
	return $.ajax({
		url:  url,//接口名称
		data: data,
		dataType: "json",
		cache: false,//是否缓存
		type: "GET",//GET请求 POST请求方式
		async: true,//是否异步
		success: function(data) {//成功回掉的方法
			callback(data);
		},
		error: function(jqXHR, textStatus, errorThrown) {
			console.log('errorThrown='+errorThrown);
			if(errorThrown != 'abort') {
			errorcb();
			}
		}
	});
}
复制代码

然后数据中的data 就是你数据（我这里是json）的格式出来了。你可以通过data.对象类型名称，得到你想要的数据再展示在你的前段页面咯。比如说得到是后台的一个name 类型，就data.name 得到数据通过在js 中的append方法来实现动态加载页面。反正也说到这里了。就就举个例子吧。

在.html 页面是这样的

    <body>
		<div id="content"></div>
	</body>
复制代码

.js 文件中：

/**
* url : 你的接口名
**/
ajax_get_async（url,{}，
  function（data）{
    //成功执行的跳转方法
      element_content = '<div class="name">' + data.name + '</div>';
      //通过jquery实现对象操作把数据添加到id为content的标签内。
      $("#content").append(element_content);
    }，
  function(){
    //失败了- -
    console.log("ERROR!");
    }）

复制代码

CSS 文件中自己定义就在这里不赘述了。

此文仅供没弄过Html5 动态页面的小菜鸡学习，所以浅析也就是这样了。更深层次的东西......emmmm，等到来日吧。

转载于:https://juejin.im/post/5a336dcdf265da431f4b1f46