jQuery-Ajax之load

最新推荐文章于 2022-03-01 18:43:56 发布

我叫阿狸猫

最新推荐文章于 2022-03-01 18:43:56 发布

阅读量1k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/world_java/article/details/9634555

版权

Jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

jQuery-Ajax之load():

JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(),第二层是 load(), $.get() 和 $.post(),第三层是 $.getScript() 和 $.getJSON()

load():

1.load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[, data][,callback])

参数分别是：

url：String类型请求HTML页面的URL地址

data(可选)：Object类型发送到服务器的数据，数据格式为json格式 {key:value}

callback(可选)：Function类型请求完成时的回调函数，无论请求成功或失败。

2.程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置(即什么元素使用了AJAX,如<p>标签使用到了,$("p").load(url,data,callback)), 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

load()方法注意点：

1、如果服务器返回的参数包含多个html元素，而客户端只需要某几个元素，这时可以用load方法中url参数来指定客户端加载哪些服务器返回数据的html元素。

load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和选择器之间有一个空格)

2、传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式

3、对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象。方法的返回值是 jQuery对象。

练习：

load01.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>ddd</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery-1.10.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="password" id="password" value="">
            <br>
            <input type="button" id="b1" value="登陆">
        </form>
        <div id="one">
        </div>
    </body>

<script language="JavaScript">
    	$(document).ready(function(){
			$("#b1").click(function(){
				/*
				 * load("load01.jsp","",function(){})方法     载入远程 HTML 文件代码并插入至 DOM 中
				 *   * 第一参数    请求的路径
				 *   * 第二参数:传递给服务器的数据    格式{name1:value1,name2:values}
				 *   * 回调函数:function(data,textStatus,XMLHttpReq)
				 *        * 服务器返回内容的 data; 
				 *        * 代表请求状态的 textStatus 对象  有succuss, error, notmodify, timeout 
				 *        * XMLHttpReq 表示XMLHttpRequest 对象
				 *        
				 *    * 方法的传递方式 
				 *           * 没有发送给服务器参数的时候,请求方法是get
				 *           * 有参数发送给服务器的时候,请求方法是post    
				 *           
				 *           
				 *    * 接收页面的某些元素
				 *      如果只需要加载目标 HTML 页面内的某些元素, 
				 *      则可以通过 load() 方法的 URL 参数来达到目的. 
				 *      通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容.
				 *      load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
       			 *
				 */
			//$("#one").load("load01.jsp h1", {username:$("#username").val(),psw:$("#password").val()},function(data,textStatus,xmlHttpReq){
			$("#one").load("load01.jsp", {username:$("#username").val(),psw:$("#password").val()},function(data,textStatus,xmlHttpReq){
					//alert("data  "+data);
					//alert("textStatus  "+textStatus);
					//alert(xmlHttpReq.readyState);
					alert(xmlHttpReq.status);
				}); 
			});
		});  
</script>

load01.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%
	System.out.println(request.getParameter("username"));
	System.out.println(request.getParameter("psw"));
   out.println("你好");
%>

<h1>hhhhhhhhhhhhhhhhhhhh</h1>