整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

$.ajax()常用方法详解(推荐)

JAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分。接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习。

1.url:

要求为String类型的参数,(默认为当前页地址)发送请求的地址。

2.type:

要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

3.timeout:

要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:

要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。


5.cache:

要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

6.data:

要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看 processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:

要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:

xml:返回XML文档,可用JQuery处理。

html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。

script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。

json:返回JSON数据。

jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。

text:返回纯文本字符串。

8.beforeSend:

要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

function(XMLHttpRequest){

this; //调用本次ajax请求时传递的options参数

}

9.complete:

要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest, textStatus){

this; //调用本次ajax请求时传递的options参数

}

10.success:

要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。

(1)由服务器返回,并根据dataType参数进行处理后的数据。

(2)描述状态的字符串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等

this; //调用本次ajax请求时传递的options参数

}

11.error:

要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:

function(XMLHttpRequest, textStatus, errorThrown){

//通常情况下textStatus和errorThrown只有其中一个包含信息

this; //调用本次ajax请求时传递的options参数

}

12.contentType:

要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter:

要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function(data, type){

//返回处理后的数据

return data;

}

14.dataFilter:

要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function(data, type){

//返回处理后的数据

return data;

}

15.global:

要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified:

要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

17.jsonp:

要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

18.username:

要求为String类型的参数,用于响应HTTP访问认证请求的用户名。

19.password:

要求为String类型的参数,用于响应HTTP访问认证请求的密码。

20.processData:

要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。

21.scriptCharset:

要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

案例代码:

$(function(){

$('#send').click(function(){

$.ajax({

type: "GET",

url: "test.json",

data: {username:$("#username").val(), content:$("#content").val()},

dataType: "json",

success: function(data){

$('#resText').empty(); //清空resText里面的所有内容

var html = '';

$.each(data, function(commentIndex, comment){

html += '<div class="comment"><h6>' + comment['username']

+ ':</h6><p class="para"' + comment['content']

+ '</p></div>';

});

近项目上用到了调用微信和支付宝的第三方支付接口,因为以前没用过,所以这次用到了之后总结一下分享给大家,这里介绍两种支付方式,即app支付和扫码支付方式。

一、app支付(这里只介绍java端调用支付,安卓或ios端自己参考相关的调用文档)

首先可以看一看项目支付流程(图解)

1. 在页面上选择支付方式(微信或支付宝)

2. 由相应的客户端调用相应的支付方式进入相应的支付页面(安卓或ios调用支付接口并进入微信或支付宝支付页面,显示支付的信息)

3. 输入密码进行支付

4. 调用支付结果接口,来返回支付成功与否

四图分别是选择支付方式、微信支付页面、支付宝支付页面、微信支付结果(成功)页面

也是基本的支付三个步骤。

一、先看微信支付:

在调用微信支付之前你应该已经下单成功(即订单信息入库成功),这里需要几个值:

OrderName(订单名称),orderNumber(订单编号,唯一),amount(金额), prepayId(交易会话id)

前三个参数直接从数据库里获取。prepayid是什么?可以具体看微信支付文档,我们可以从下单接口中返回获得这个会话id并且需要入库,这个参数最重要的作用是用于第一次我们没有支付,但已经生成了一个待支付的订单。这种情况下我们不需要再次去调用下单接口返回prepayId,因为我们已经生成过了这个值

下面看手机端页面的js代码:


  1. //微信支付
  2. function wxPay(outTradeNo){
  3. var orderType="0"; //路线 订单
  4. $.ajax({
  5. url :'<%=basePath%>client/travel/getWXClientPayInfo.do?outTradeNo='+outTradeNo+'&orderType='+orderType,
  6. cache : false,
  7. type : "get",
  8. success : function(data)
  9. {
  10. if(data!=null){
  11. data = jQuery.parseJSON(data);
  12. var u = navigator.userAgent;
  13. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  14. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  15. if(isAndroid){
  16. ClientInterface.pay(outTradeNo,data.prepayid,data.noncestr,data.timestamp,data.sign,orderType);
  17. }

 “Web 可访问性”一词定义了一组开发人员需要遵循的准则,以使Web应用程序的交互更加方便。任何网站的内容、UI/UX 设计和布局都应该是可访问的。在这篇文章中,我们研究了前端团队可以做些什么来轻松地将他们的网站提升到适合Web可访问性的标准。

  保持标记清洁

  无论你使用什么标记,都要正确整齐地构建它,避免跳过关卡。例如,在HTML中使用 <button> 元素而不是 <span> 或 <div>。使用 <nav> 进行导航,使用 <button> 进行页面操作。

  将 <strong> 或 <em> 元素与 <bold> 或 <i> 区分开来。前两者用于对内容的语义强调,后两者用于视觉强调。

  l 确保横幅中的公司徽标链接回网站的主页。

  l 使用 <lang> 属性告诉浏览器在网站上使用哪种语言。

  l 如果你想在视觉上和屏幕阅读器中隐藏内容,请使用 hidden 属性。

  l 为长页面添加锚链接(跳转链接),以便用户可以跳过他们不需要的内容并继续相关部分。

  注意页面语义

  用户和机器(屏幕阅读器、盲文显示器)都应该能够识别页面结构。通过使用页面上的分段(<header>、<footer>、<article>、<nav>)和标题元素来创建语义布局。这有助于定义网页的清晰层次轮廓,并区分主要(主要:<h1>、<h2>、<article>)和次要(不太重要:<h3> - <h6>、<footer>)内容。

  当你在页面中使用标题时,不要使用格式(字体样式和大小)伪造标题属性 (<h>) 的实际标记,因为这不允许辅助技术识别这些是标题。

  在适当的情况下在网页中使用 ARIA 地标。ARIA(可访问的富 Internet 应用程序)是一个综合技术规范,用于将可访问性信息添加到本地不可访问的元素(特别是使用 JavaScript、AJAX 和 DHTML 开发的元素)。使用 ARIA 地标,开发人员可以扩展 HTML 功能并将适当的语义(即属性)应用到 UI 和内容元素,以便辅助技术理解这些。

  这是一个 HTML 语义元素(<header>、<nav>、<main>、<footer>)如何与 ARIA 角色属性(“banner”、“navigation”、“main”、“contentinfo”)组合的示例使用户更容易使用屏幕阅读器进行网站导航。

  尽管大多数 ARIA 功能最近都是在 HTML5 中实现的(你绝对应该喜欢这些!),但并非所有屏幕阅读器和浏览器(例如 IE)都足够复杂,仅依赖于 HTML 语义。适当使用 ARIA 的一些示例是分配角色来描述某些类型的小部件(“菜单”、“树项”、“滑块”),定义描述拖放源和放置目标的拖放属性,以及添加警报以通知有关动态页面更改的辅助技术。

  

  支持标签导航

  使元素的 Tab 顺序(也称为文档对象模型或 DOM 顺序)与视觉顺序一致。从 Tab 顺序中删除不必要的元素,以免混淆使用 Tab 或辅助设备导航的用户。

  使导航元素的焦点可见。你可以为此使用第三方插件或 <outline> 属性,该属性为在选项卡式导航(或其替代方案)时具有焦点的页面元素和链接提供视觉反馈。

  使用 <tabindex> 属性可以使链接、按钮和表单字段等元素具有焦点,并且可以通过 Enter 键和/或空格键进行选择。即使具有 <tabindex> 属性和 0 整数值的不可聚焦元素也可以成为可聚焦元素,例如<h3 tabindex="0">一个可聚焦的标题</h3>

  如果页面上有弹出窗口,导航优先级应该允许首先关闭它们。完成此操作后,理想情况下,焦点应该跳回到用户被打开的模式窗口打断的网页元素。为此,请将最后一个焦点元素存储在变量中。

  为图像添加替代文本

  屏幕阅读器几乎可以访问页面上的所有内容——图形信息除外。所以不要忘记为图像和其他图形添加替代文本(<img> alt 属性)。这不仅可以帮助使用辅助技术“阅读”屏幕的人,还可以帮助互联网连接不佳的用户。你的网站也将使用图像替代文本进行 SEO 优化。在Web前端培训中,不仅有理论知识的课程,也会有实操项目的训练,让你深入浅出地学习前端技术,弥补项目经验的空缺。

  图像替代文本应该精确、简洁,并反映添加图像的主要目的。根据上下文,相同的图像可能有不同的替代文本,例如 如果将公司徽标放在标题中并将用户返回到主页,则其准确的替代文本可能是`<img alt="Company X logo - Home page.">`

  l 在替代文本中,避免使用多余的“图像”或“图像”——无论哪种方式,辅助技术都会警告用户有图像。

  l 以句点结束替代文本。这将使屏幕阅读器在 alt 文本中的最后一个单词之后暂停一点,从而为用户提供更愉快的体验。

  l 具有多个可点击区域的图像(例如图像地图)的替代文本应提供这些链接的完整描述。此外,每个可点击区域都应该有相应的替代文本来描述其目的或目的地。

  l 避免使用文字图片;如果你不能没有它们,替代文本应该包含与图像中相同的单词。

  l 如果你有多个图像传达一条信息,则组中第一张图像的替代文本应包含整个组的信息。

  l 要熟悉替代文本的普遍接受标准,你可以随时查看此替代文本决策树。

  虽然必须为所有对理解内容很重要的图像添加替代文本,但对于与内容没有直接关系的菜单图标或装饰性图像(如封面)则无需这样做。对于这样的图像,只需使用一个空的 <img alt> 属性。

  最后技巧

  尽管这些提示肯定会增加你网站的包容性,但最好不要将 Web可访问性视为一套正式的指南。首先,它是一项全面的策略,可以关心所有用户并使你的网站内容可供他们使用——无论他们使用何种浏览器、互联网提供商或辅助设备。