前端开发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;

后台开发属于前端吗
前端界面和后台开发界面
我是后台开发转前端好转嘛
» 本文来自:前端开发者 » 《前端开发jQuery数据交互Ajax》
» 本文链接地址:https://www.rokub.com/6236.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!