
文件的准备:前端代码准备:
前台页面:
test.php的资源:
点击页面输出效果:
方法/步骤2
jquery的ajax的使用及封装:jquery对ajax操作进行了封装,在jquery中:$.ajax()方法属于最低层的方法;第二层: load(); $.get(); $.post();===》使用频率高第三层:$.getScript(); $.getJSON()方法
load();能载入远程HTML代码并插入DOM中。语法结构:load(url[,data][,callback])参数解释:url: 类型string ==》请求HTML页面的URL地址;data:发送至服务器的key/value数据;callback:请求完成时的回调函数,无论请求成功或者失败;代码测试:1.准备前台页面:load.html
load.html页面输出为:
2.准备被load调用的html页面:loadtest.html
loadtest.html页面输出为:
3.在load.html页面点击时加载输出状况为:此时把loadtest.html的页面加载过来了,方法为load();方法;
load()===>筛选载入的HTML文档;上面时整个loadtest的页面;以下是加载页面的某些元素;可以通过URL参数来达到目的;load()方法的URL参数的语法结构:"url selector" ;注意URL 与选择器之间有一个空格;代码如下:
页面点击输出效果:
load()的传递方式:load()的传递方式根据参数data来自动指定;诺没有参数传递则采用GET方式传递;反之则会自动转换为post方式;回调参数: load()的回调函数有3个参数,分别代表请求返回的内容, 请求状态 和 XMLHttpRequest对象;在load()方法中,无论Ajax请求是否成功,只要当请求完成后,回调函数就会触发.....测试代码如下:
输出查看的结果:
最终:
点击输出:
以上load()的方法通常是用来从Web服务器上获取静态的数据文件;然而并不能体现ajax的价值;如果需要传递一些参数给服务器中的页面:经常用到的是$.get() 或者 $.post() 或者是$.ajax();$.get(),$.post()是jquery的全局函数;1.$.get()方法: $.get()方法使用GET方式来进行异步请求。语法结构:$.get(url[,data][,callback][,type]);参数详解:url==>string 请求的HTML页的URL地址;data==>object ,可选,发送至服务器的key/value数据会作为QueryString附加到请求的URL中callback==>Function 可选,载入成功时回调函数,只有当Response的返回状态是success才调用该方法,自动将请求结果和状态传递该方法;type==>string,服务器端返回内容的格式,包括XML HTML script json text 和default;测试代码如下:html
get方法的使用:
页面输出效果:
