AJax技术

深入理解ajax系列第九篇:jQuery中的ajax(2)

字号+ 作者:H5之家 来源:H5之家 2017-04-05 11:00 我要评论( )

json文件如下 [{ name : 足球 },{ name : 散步 },{ name : 篮球 },{ name : 乒乓球 },{ name : 骑自行车 }]getScript() getScript()方法使用一个HTTP GET请求从服务器加载并执行一个javascript文件 getScript()方法

json文件如下

[{ "name": "足球" },{ "name": "散步" },{ "name": "篮球" },{ "name": "乒乓球" },{ "name": "骑自行车" }] getScript()

getScript()方法使用一个HTTP GET请求从服务器加载并执行一个javascript文件

getScript()方法调用格式如下,参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数

$.getScript(url,[callback])

相当于一个Ajax函数的缩写

$.ajax({ url: url, dataType: "script", success: success }); ==> $('#btnShow').click(function(){ var $this = $(this); $.getScript('sport.js',function(){ $this.attr('disabled','true'); $('#result').html($html); }) }) </script>

js文件如下

var data = [{ "name": "足球" }, { "name": "散步" }, { "name": "篮球" }, { "name": "乒乓球" }, { "name": "骑自行车" }]; var $html = ''; $.each(data, function (index, sport) { $html += "<div>" + sport["name"] + "</div>"; }); get()

get()方法使用一个HTTP GET请求从服务器加载数据

【调用格式】

get()方法的调用格式如下所示,url表示一个包含发送请求的URL字符串;data表示发送给服务器的字符串或Key/value键值对;success(data, textStatus, jqXHR)表示当请求成功后执行的回调函数;dataType表示从服务器返回的预期的数据类型。默认:智能猜测(xml, json, script, 或 html)

)

相当于一个ajax功能的缩写

$.ajax({ url: url, data: data, success: success, dataType: dataType });

【使用参数】

通过get()方法发送给服务器的key/value数据会作为查询字符串最终附加到URL中

=>姓名:=> ==> ==> <div class="comment">已有评论: > </div> <script> $('#send').click(function(){ $.get('jqGet.php',{ username:$('#username').val(), content:$('#content').val() },function(data){ // }) }) </script>

【回调函数】

function(data,textStatus){ //data: 返回的内容,可能是XMLJSONHTMLJS //textStatus: successerrornotmodifiedtimeout四种 }

【数据格式】

1、HTML片段

function(data,textStatus){ $('#resText').html(data); }

2、XML文档

function(data,textStatus){ var username = $(data).find('comment').attr('username'); var content = $(data).find('comment content').text(); var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>"; $('#resText').html(txtHtml); }

3、JSON

function(data,textStatus){ var username = data.username; var content = data.content; var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>"; $('#resText').html(txtHtml); } =======> $('#send').click(function(){ $.get('jqRequest.php',{ num: $('#num').val() },function(data){ $('#result').html('您选择的数字' + $('#num').val() + '是' + data) }) }) $num = $_REQUEST['num']; if($num % 2 == 0){ echo '偶数'; }else{ echo '奇数'; } ?>

post()

post()方法使用一个HTTP POST 请求从服务器加载数据

)

 

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

相关文章
  • Discuz Uchome ajaxpost小技巧

    Discuz Uchome ajaxpost小技巧

    2017-04-05 11:01

  • 一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载

    一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载

    2017-04-05 10:01

  • Ajax缓存和编码问题的最终解决方案

    Ajax缓存和编码问题的最终解决方案

    2017-04-04 15:03

  • 用ajax跟PHP实现简单的流程管理

    用ajax跟PHP实现简单的流程管理

    2017-04-04 15:00

网友点评
h