html5 数据交互纯ajax,前端开发jQuery数据交互Ajax

后台开发与前端开发

后台转前端开发还是测试

前端开发 后台

1.load方法：

jq中用来请求静态文件的方法，如请求

//load方法筛选请求内容：在url之后添加要加载的标签的标志，标志可以是tag\id\class，之间使用空格隔开，这样就只能加载到指定的数据

$('#news').load('news.html h3');

});

2.get()方法

$(‘button’).click(function () {

//.get()用来向服务器发起get请求

//第一个参数是请求路径,必选，其他选选

//第二个参数是对象类型的数据，把需要提交给服务器的参数放在这个对象中

//第三个参数是载入成功时回调函数，通过这个回调函数拿到请求的值，只有请求成功才会调用

//第四个参数type:服务器返回数据的类型，如果我们需要请求的服务器给我们返回的是json数据，则这个参数只能写json，尽量不要给这个参数

$.get(‘test.json’,{name:”fang”}, function (data) {

//通过data参数拿到请求到的值

alert(data)

//数据提取并拼接在文档中

},’json’);

//.post()方法用来发起post请求，当服务器只能接收post请求时，使用该方法，该方法的用法和参数情况和.get完全一样

$.post();

});

3.getJson()方法

//getJSON():使用get方式获取json文件

//第一个参数url：请求的数据接口

//第二参数callback:请求成功的回调函数，通过这个函数的参数获取到服务器返回的值

$.getJSON(‘http://10.0.159.198/news.php?callbackFun=?’, function (data) {

});

//如何跨域? callbackFun这个名字由服务器定，后面跟问号即可

//只需要在url后拼接上回调函数的属性名和属性值即可，属性名由后台人员指定，属性的值可以是一个“？”，而且必须是问号，因为jq只认识问号，jq会自动把这个？转化为回调函数的函数名

$.getJSON('http://10.0.159.198/news.php?callbackFun=?', function (data) {

console.log(data);

console.log(data.age);

console.log(data.name);

console.log(data.gender);

});

4.使用$.ajax()实现跨域请求

$.ajax({

//url参数必填,表示数据接口

url:'http://10.0.159.198/news.php',

//type参数可选请求方式大小写无所谓

//GET:1.参数拼接在URL之后2.参数的大小有限制，限制在2k，因为服务器端口最多只能接收2k字节的数据3.用GET发起的请求数据会在浏览器中缓存

//POST:1.参数存放在请求头中2.传递的参数大小没有限制3.浏览器不会缓存post数据

type:'GET',

//dataType,服务器返回的数据格式,json是数据格式，jsonp是一种数据形式，他俩没有可比性

//dataType，表示希望服务器返回的数据类型，必填

//jsonp这种类型的数据格式只存在jq中

dataType:'jsonp',

//jsonp:表示传递给服务器时回调函数名字值的属性名,必填

jsonp:'callbackFun',

//data:传递参数以及回调函数，回调函数的属性名要和jsonp中指定的一致，而回调函数的值用问号去表示

data:'callbackFun=?',

//success:可选的，表示请求成功的回调函数

success: function (data) {//缺点：一个成功状态只能绑定一个函数

alert(data.name);

},

//error:可选的，表示请求失败的回调函数

error: function (err) {

console.log(err);

}

});

5.$.ajax()方法

$.ajax({

//url参数必填,表示数据接口

url:’test.json’,

//type参数可选请求方式大小写无所谓

//GET:1.参数拼接在URL之后2.参数的大小有限制，限制在2k，因为服务器端口最多只能接收2k字节的数据3.用GET发起的请求数据会在浏览器中缓存

//POST:1.参数存放在请求头中2.传递的参数大小没有限制3.浏览器不会缓存post数据

type:’GET’,

//data参数可选，把需要提交给服务器的参数用&符号连接起来

data:”user=123&pass=123″,

//success:可选的，表示请求成功的回调函数

success: function (data) {

console.log(data);

},

//error:可选的，表示请求失败的回调函数

error: function (err) {

console.log(err);

},

//timeout:可选的，设置请求超时时间，一般很少用

timeout:1000

});

6.初步接触promise()

1.什么是promise()?

promise对象用来进行延迟和异步计算，执行完$ajax()后会返回一个对象，用变量接收这个变量后，可以把不同状态的回调函数添加在这个对象上

2.为什么要使用promise?

使用promise可以为服务器的某个状态添加多个回调函数

3.如何使用promise？

.done\fail\always当数据请求成功、失败、成功失败后会执行对应的方法并把数据、错误传递进回调函数

实例：.$.ajax()执行完毕会返回一个请求对象

var pro = $.ajax({

url:”test.json”,

type:”GET”,

});

//.done()表示请求成功执行的方法

pro.done(function (data) {

alert(data);

});

pro.done(function () {

alert("ok");

});

//.fail()表示请求失败执行的方法

pro.fail(function () {

alert("fail");

});

pro.fail(function () {

alert("fail fail");

});

//.always()无论请求成功还是失败都会调用这个方法

pro.always(function () {

alert("always");

});

//以上三种状态可以绑定任意种回调函数，可以用来减轻一个函数里面的代码量,一种状态指定多个操作，降低传参的压力

//promise用链式语法添加

pro.done(function(data){alert(data);}).fail(function () {

alert('链式语法失败')

}).always(function () {

alert('链式语法总是');

});

——————————html复习—————————————-

1./把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。/

background-size: cover;

2.图片垂直居中可以使用vertical-align: middle;

3.文本输入框点击、按钮点击去掉默认的边框添加自己喜欢的边框

input:focus{

/清除自带的边框颜色/

outline: none;

/重设边框颜色/

border-color: red;

/设置边框阴影，x\y设为零，上下左右都会有阴影/

box-shadow: 0 0 5px yellow;

}

4.按钮会自带一些边框，可以用重写的方法去掉

/去掉自带的边框/

border: 0px;

后台开发属于前端吗

前端界面和后台开发界面

我是后台开发转前端好转嘛