Javascript-- jQuery Ajax应用
Posted Nyan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript-- jQuery Ajax应用相关的知识,希望对你有一定的参考价值。
使用ajax()方法加载服务器数据
使用ajax()
方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:
jQuery.ajax([settings])
或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象,在该对象中,
url表示服务器请求的路径,
data为请求时传递的数据,
dataType为服务器返回的数据类型,
success为请求成功的执行的回调函数,
type为发送数据请求的方式,默认为get。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用ajax()方法加载服务器数据</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">检测数字的奇偶性</span> <span class="fr"> <input id="btnCheck" type="button" value="检测" /> </span> </div> <ul> <li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /> </li> </ul> </div> <script type="text/javascript"> $(function () { $("#btnCheck").bind("click", function () { $.ajax({ url:"http://www.imooc.com/data/check.php", data: { num: $("#txtNumber").val() }, type:"post", success: function (data) { $("ul").append("<li>你输入的<b> " + $("#txtNumber").val() + " </b>是<b> " + data + " </b></li>"); } }); }) }); </script> </body> </html>
使用load()方法异步请求数据
使用load()
方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:
load(url,[data],[callback])
参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
使用getJSON()方法异步加载JSON格式数据
使用getJSON()
方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为:
jQuery.getJSON(url,[data],[callback])
或$.getJSON(url,[data],[callback])
其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用getJSON()方法异步加载JSON格式数据</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">我最喜欢的一项运动</span> <span class="fr"> <input id="btnShow" type="button" value="加载" /> </span> </div> <ul></ul> </div> <script type="text/javascript"> $(function () { $("#btnShow").bind("click", function () { var $this = $(this); $.getJSON("http://www.imooc.com/data/sport.json",function(data){ $this.attr("disabled", "true"); $.each(data, function (index, sport) { $("ul").append("<li>" + sport["name"] + "</li>"); }); }); }) }); </script> </body> </html>
以上是关于Javascript-- jQuery Ajax应用的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript之Ajax-6 Ajax的增强操作(jQuery对Ajax的支持表单操作)
如何使用 javascript/jquery/AJAX 调用 Django REST API?