黑马day18 jquery高级特性&Ajax的load方法
2015-07-15 20:18
751 查看
介绍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页面
控制台显示:
(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!"); %>浏览器显示:
控制台显示:
相关文章推荐
- 在jquery中用下拉框列表显示默认的值
- jQuery--自定义插件
- MVC注册验证:js方法(jQuery)
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
- jsonp+jquery示例代码,jsonp是什么?看完了还不会我就给你跪了.....
- struts2中用jquery、ajax实现下拉框的级联
- jquery动态创建表格
- 自定义jQuery插件Step by Step
- JQuery的animate
- jQuery插件开发模式
- Jquery插件开发 详细
- jQuery插件开发的五种形态小结
- 文章标题jquery的this与$(this)的区别与联系
- jquery与Dom元素的互换
- 深入理解jQuery插件开发
- Jquery 获取IP地址
- jquery innerHeight(),outerHeight(),height()的区别
- 看了两天jquery 插件的写法练手解决placeholder不兼容问题
- jquery中取消和绑定hover事件的正确方式
- jQuery--工具函数