AJax技术

[置顶] 从零开始学习WEB前端之数据交互(Ajax)(5)

字号+ 作者:H5之家 来源:H5之家 2017-06-19 13:03 我要评论( )

示例: $.ajax({url: '01.php' , //请求地址 data: 'name=foxage=18' , //发送的数据 type: 'GET' , //请求的方式 success: function (argument) { }, // 请求成功执行的方法 beforeSend: function (argument) { },

示例:

$.ajax({ url:'01.php',//请求地址 data:'name=fox&age=18',//发送的数据 type:'GET',//请求的方式 success:function (argument) {},// 请求成功执行的方法 beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理 error:function (argument) {console.log(argument);},//请求失败调用 })

格式化表单
我们在向服务器提交数据时,如果使用的是Ajax需要手动将数据格式化name=fox&age=18类似这样的格式,JQuery已经帮助我封装好了一个格式化数据的方法
$(selector).serialize()
可以将form中拥有name属性的表单元素的字,进行格式化。

> >==> <script type="text/javascript"> $(function() { $(param = $("#loginForm").serialize(); alert(param); }); }) > <form id="loginForm"> 用户名:="user" /> <br /> 密码: ==>

这里写图片描述

跨域请求
跨域是指 不同域名之间相互访问,由于安全原因,跨域访问是被各大浏览器所默认禁止的。
例如我想拿到聚合网站中的数据,默认请求是发不出去的。

> >=> <script> $(function() { $("button").eq(0).on("click", function() { $.ajax({ type: "get", url: "http://v.juhe.cn/toutiao/index?type=keji&key=4c52313fc9247e5b4176aed5ddd56ad7", async: true, success: function(data) { console.log(data); } }); }); }); > >

这里写图片描述

有图片可以看出,当我们点击按钮请求数据的时候给我们报了个错,大致意思就是不允许访问。那我们如果才能访问的到呢?

JSONP
JSON with Padding其本质是利用了<script src=""></script>标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。

而jQuery 的$.ajax()方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。
dataType: ‘jsonp’ 设置dataType值为jsonp即开启跨域访问
jsonp 可以指定服务端接收的参数的“key”值,默认为callback
jsonpCallback 可以指定相应的回调函数,默认自动生成

示例:

> >=> <script> $(function() { $("button").eq(0).on("click", function() { $.ajax({ type: "get", url: "http://v.juhe.cn/toutiao/index?type=keji&key=4c52313fc9247e5b4176aed5ddd56ad7", dataType: "jsonp", success: function(data) { console.log(data); } }); }); }); > >

这里写图片描述

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax式富客户端在学习管理系统的应用研究

    Ajax式富客户端在学习管理系统的应用研究

    2017-06-19 13:04

  • 《Ext JS 3.2 学习指南》(Learning Ext JS 3.2)英文文字版/更新源代码[PDF]

    《Ext JS 3.2 学习指南》(Learning Ext JS 3.2)英文文字版/更新源代

    2017-06-18 16:04

  • Vue.js学习系列

    Vue.js学习系列

    2017-06-18 12:01

  • 前端学习1——Bootstrap jquery ajax

    前端学习1——Bootstrap jquery ajax

    2017-06-17 16:06

网友点评
c