详解JavaScript中jQuery和Ajax以及JSONP的联合使用(3)

一个回调函数 :此回调函数在请求成功执行后被触发。可选。该回调函数接受服务端返回的数据,也包括请求的状态码及原始对象。
    数据类型 :服务端返回数据的类型。可选。

        备注:此选项只适用于那些在其名称中没指定数据类型的方法。

下面是三个简便方法的示例:

// 获取纯文本或者 html $.get('/users.php', { userId : 1234 }, function(resp) { console.log(resp); }); // 向页面中添加脚本,然后执行脚本中定义的函数。 $.getScript('/static/js/myScript.js', function() { functionFromMyScript(); }); // 从服务端获取 JSON 格式的数据。 $.getJSON('/details.php', function(resp) { $.each(resp, function(k, v) { console.log(k + ' : ' + v); }); });

$.fn.load

$.fn.load 方法是 jQuery 所有 Ajax 方法中唯一在选择器结果集上调用的方法。$.fn.load 方法从给定的 URL 上获取信息,然后填充到选择器结果集包含的元素中。另外,在 URL 后面还可以附加一些选择器,jQuery 最终只会把跟选择器相匹配的内容填充到对应的 HTML 元素中。

下面是示例:

$('#newContent').load('/foo.html'); // 或 $('#newContent').load('/foo.html #myDiv h1:first', function(html) { alert('加载完毕!'); });

Ajax 和 表单

在跟表单打交道方面,jQuery 的 Ajax 更显神威。最为有用的两个方法就是 $.fn.serialize 和 $.fn.serializeArray,下面是它们的用法:

// 将表单中数据转化为查询字符串 $('#myForm').serialize(); $('#myForm').serializeArray(); // 将表单中数据转化为对象数组,如: [ { name : 'field1', value : 123 }, { name : 'field2', value : 'hello world' } ]

使用 JSONP

JSON 的本质其实是一种跨站点脚本注入。现在有很多比较好的网站都提供了 JSONP 服务,允许我们用他们预先定义好的 API 获取他们的数据。下面是一个示例,来源于 ?p=2682

服务端代码:

<?php header("content-type: text/javascript"); if(isset($_GET['name']) && isset($_GET['callback'])) { $obj->name = $_GET['name']; $obj->message = "Hello " . $obj->name; echo $_GET['callback']. '(' . json_encode($obj) . ');'; } ?>

客户端代码:

$.ajax({ url: 'http://otherDomail.com:8080/JSONP/jsonp-demo.php', data: {name: 'Super man'}, dataType: 'jsonp', jsonp: 'callback', success: function( response ) { console.log( response.message ); } });

jQuery 把 JSONP 的实现细节隐藏在幕后,我们要做的就是告诉 jQuery 服务端定义好的函数名以及我们请求的数据类型是 JSONP,其它方面和普通的 Ajax 请求没什么区别。
Ajax 事件

很多时候我们都需要在 Ajax 请求开始或结束时做一些操作,例如显示或隐藏一个 loading… 图片。这些工作本可以在每个 Ajax 请求中各自实现,但是 jQuery 提供了更好的方法,你可以像绑定普通事件一样绑定 Ajax 事件。若要参阅全部事件列表,可访问 。下面是简单示例:

$('#loading_indicator') .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggsjx.html