黑马day18 jquery高级特性&Ajax的load方法

介绍jquery中的load方法:

(1).前面没有jquery.修饰,可以推断出他是一个普通的非全局函数(也就是说是一个局部函数):$.,$().,jquery.等修饰的就是全局函数,没有这些修饰的就是局部函数。

(2).$(expr).load(url,data,callback);

url:请求路径,绝对路径或者相对路径都可以.

data: 请求参数,格式必须是key/value格式(json格式)

callback:回调函数。function(data,textStatus,XMLHttpRequest) data:代表请求返回内容 textStatus:代表请求状态succuss, error, notmodify, timeout 4 种 XMLHttpRequest:XMLHttpRequest对象

(3).默认情况下在没有向服务器发送请求数据的时候是load()方法就是GET请求,如果有请求参数那么就是POST请求

(4). load()不能自定义请求类型,而是由是否向服务器端发送请求数据.  load()不能自定义数据交换格式,只能使用文本(HTML)格式

案例:

load.html页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>load()方法</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.4.2.js">
        </script>
        <style type="text/css">
            div, span {
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Roman;
            }

            div.mini {
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family: Roman;
            }

            div.visible {
                display: none;
            }
        </style>
        <!--引入jquery的js库-->
    </head>
    <body>
        <form action="" name="form1" id="form1">
            <input type="text" name="username" id="username" value="zhang">
            <br>
            <input type="text" name="psw" id="psw" value="99999">
            <br>
            <input type="button" id="b1" value="登陆">
        </form>
        <div id="one">
        </div>
    </body>
    <script language="JavaScript">
     	$().ready(function(){
			var json={username:$("#username").val(),psw:$("#psw").val()};
			$("#b1").click(function(){
				$("#one").load("load.jsp",json,function(data,textStatus,XMLHttpRequest){
					alert(data);
					alert(textStatus);
				});
			});
		});
    </script>
</html>

load.jsp(相当于一个服务器,也可以使用Servlet我这里使用的jsp比较方便)

<%@ page language="java" pageEncoding="UTF-8"%>
<%
	System.out.println("connection server success!");

	System.out.println(request.getMethod());//获取请求参数类型

	System.out.println("username = "+request.getParameter("username"));//获取请求参数
	System.out.println("password = "+request.getParameter("psw"));

	out.println("helloworld!");

%>

浏览器显示:

控制台显示:

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 07-13

黑马day18 jquery高级特性&Ajax的load方法的相关文章

jQuery教程 - Ajax之load()方法

jQuery教程 - Ajax之load()方法 标签: jqueryajaxxmlhttprequesthtmlcallback 2009-10-05 14:54 3700人阅读 评论(3) 收藏 举报  分类: jQuery(7)  版权声明:本文为博主原创文章,未经博主允许不得转载. jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是laod().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON(

Ajax的load方法演示

load方法的参数形式为: load(url,[data],[callback]); 其中url为请求HTML页面的URL地址.[data]表示发送至服务器的key/value数据.callback表示请求完成时的回调函数,无论请求成功或者失败. 下面的实例就演示了关于Ajax的load方法来请求另一个页面的内容. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/ht

jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数. 2.使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的

jQuery高级选择器和其等价方法

jQuery选择器和css一样,但兼容性更好 <body> <p>p1</p> <p>p1</p> <p>p1</p> <div id="box"> <p>p2</p> <p>p2</p> <p>p2</p> <div> <p>p3</p> <p>p3</p>

jQuery AJAX load() 方法

jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL. 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合. 可选的 callback 参数是 load() 方法完成后所执行的函数名称. 这是示例文件("demo_test.txt")

20151205 jquery 学习笔记--Ajax

Ajax全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML), 它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形 成的结合体.使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户 体验. 一.Ajax 概述 Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的.它本身不是单一技术,是一串 技术的集合,主要有: 1.JavaScript,通过

论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解

一.什么是JQuery? JQuery是一种JavaScript框架,是一堆大神搞出来的能够让前端程序猿敲更少代码.实现更多功能的工具(在此,跪谢各位JQuery开发大大们!!!).JQuery的使用给优化HTML文档操作.事件处理.动画设计和Ajax交互提供了巨大的便利.而且,其特有的链式语法也较与JS更为清晰. 二.JQuery入门 想要使用JQuery框架,就必须在html文档中导入JQuery插件,导入方式和日常导入外部JS文件的方式是相同的.但要注意,在同一html文档中插入多个外部J

jquery中的ajax

jQuery 对Ajax 做了大量的封装,我们使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 1 .load()方法可以参数三个参数:url(必须,请求html 文件的url 地址,参数类型为String).data(可选,发送的key/value 数据,参数类型为O

jQuery中对AJAX操作的封装函数

jQuery提供了6个简化AJAX操作的函数,每个都可以代替元素AJAX中的四步代码! (1)$('xxx').load()         jQuery对象函数 (2)$.get()                   jQuery全局函数 (3)$.post()                 jQuery全局函数 (4)$.getScript()          jQuery全局函数 (5)$.getJSON()           jQuery全局函数 (6)$.ajax()