靠谱前端培训|上海web前端培训机构-百读易莱胜官网 靠谱前端培训.png

靠谱前端培训.png
【上海校区】 专攻小班JS前端培训
当前位置:  主页 > web前端文章 > javascript >

jQuery环境中的数据交互Ajax

2019-04-04/11:04:17

关于jQuery工作环境中如何用ajax进行数据交互的问题,今天前端培训班百读易莱胜为您解析。

1.load方法:

jq中用来请求静态文件的方法,如请求html文档

        //hbuild值接受get请求

        //load的参数:第一个参数url,表示的要请求的静态文件的路径;第二个参数data,要发送给服务器的参数,如果没有传这个参数,则默认用get方式请求服务器,如果传了参数且参数是键值对,则load会转换为post方式请求数据,get的用post请求服务器返回500错误;第三个参数callback请求结束时执行的回调函数,不管请求是否成功,都会执行该回调函数

        //load请求下来的静态文件后,会直接把文件拼接进指定的标签中,缺点是无法控制它的请求方式

    timg (7).jpg           

 $('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()实现跨域请求

    timg (9).jpg

  $.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
      });

timg (10).jpg

更多详细前端开发学习资料,请详见官网:百读易莱胜

 

 


下一篇:没有了

+相关文章推荐+