jquery高级特性Ajax的load方法

最新推荐文章于 2021-03-10 17:42:46 发布

李卫康的博客

最新推荐文章于 2021-03-10 17:42:46 发布

阅读量1k

点赞数

分类专栏： JAVA 进阶之路文章标签： jquery

本文链接：https://blog.csdn.net/u014010769/article/details/46897953

版权

JAVA 进阶之路专栏收录该内容

90 篇文章 0 订阅

订阅专栏

介绍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!");
	
%>

浏览器显示：

控制台显示：

李卫康的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery高级特性Ajax的load方法

介绍jquery中的load方法：(1).前面没有jquery.修饰，可以推断出他是一个普通的非全局函数（也就是说是一个局部函数）:$.,$().,jquery.等修饰的就是全局函数，没有这些修饰的就是局部函数。(2).$(expr).load(url,data,callback);url：请求路径，绝对路径或者相对路径都可以.data: 请求参数，格式必须是key/value格式(json格式)...
复制链接

扫一扫