前端开发jQuery数据交互Ajax

1.load方法：

jq中用来请求静态文件的方法，如请求html文档
//hbuild值接受get请求
//load的参数：第一个参数url，表示的要请求的静态文件的路径；第二个参数data，要发送给服务器的参数，如果没有传这个参数，则默认用get方式请求服务器，如果传了参数且参数是键值对，则load会转换为post方式请求数据，get的用post请求服务器返回500错误;第三个参数callback请求结束时执行的回调函数，不管请求是否成功，都会执行该回调函数
//load请求下来的静态文件后，会直接把文件拼接进指定的标签中，缺点是无法控制它的请求方式
$(‘button’).click(function () {
//回调函数中的三个可选参数，第一个表示请求到的数据，第二个参数表示请求状态，第三个参数jq创建出来的请求对象
// $(‘#news’).load(“news.html”, function (responseText, responseStatus, responseObj) {
//
// });

                //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;