jquery_ajax 入门实例
序：本文通过几个小样例，简单介绍怎样使用jqueryAjax异步载入。
1. $(selector).load(url,[data],[callback]) :加载远程HTML文件代码并插入DOM中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选參数) 发送至server的 key/value 数据。
callback (Callback) : (可选參数) 请求完毕时(不须要是success的)的回调函数。
这种方法默认使用 GET 方式来传递的，假设[data]參数有传递数据进去。就会自己主动转换为POST方式的。jQuery 1.2 中，能够指定选择符，来筛选加载的 HTML 文档。DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。
eg : $(".div1").load(url,[data],[callback])
2.$. get(url,[data],[callback]): 使用GET方式来进行异步请求
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给server的数据，以 Key/value 的键值对形式表示。会做为QueryString附加到请求URL中。
callback (Function) : (可选) 加载成功时回调函数(仅仅有当Response的返回状态是success才是调用该方法).
3.$.post(url,[data],[callback]) :使用GET方式来进行异步请求。
參数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给server的数据。以 Key/value 的键值对形式表示。
callback (Function) : (可选) 加载成功时回调函数(仅仅有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。事实上应该为client请求的类型(JSON,XML,等等)data(Map) : (可选) 要发送给server的数据。以 Key/value 的键值对形式表示。
4.$.ajax(options):通过Http请求载入远程数据 。
这个是jQuery 的底层 AJAX 实现。
简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。
大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
注意： 假设你指定了 dataType 选项，请确保server返回正确的 MIME 信息，(如 xml 返回 "text/xml")。
错误的 MIME 类型可能导致不可预知的错误。
当设置 datatype 类型为 'script' 的时候，全部的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 仅仅有一个參数：參数 key/value 对象，包括各配置及回调函数信息。
具体參数选项见下。
jQuery 1.2 中，您能够跨域载入 JSON 数据，使用时需将数据类型设置为 JSONP。
使用 JSONP 形式调用函数时。如 "myurl?
callback=?
" jQuery 将自己主动替换 ?
为正确的函数名。以运行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自己主动调用回调函数。
參数列表：
| 參数名 | 类型 | 描写叙述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: "GET") 请求方式 ("POST" 或 "GET")， 默觉得 "GET"。注意：其他 HTTP 请求方法。如 PUT 和 DELETE 也能够使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下。全部请求均为异步请求。
假设须要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完毕才干够运行。 |
| beforeSend | Function | 发送请求前可改动 XMLHttpRequest 对象的函数。如加入自己定义 HTTP 头。
XMLHttpRequest 对象是唯一的參数。 function (XMLHttpRequest) {
this; // the options for this ajax request
|
| cache | Boolean | (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中载入请求信息。 |
| complete | Function | 请求完毕后回调函数 (请求成功或失败时均调用)。
參数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
|
| contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至server时内容编码类型。
默认值适合大多数应用场合。 |
| data | Object, String |
发送到server的数据。将自己主动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自己主动转换。必须为 Key/Value 格式。假设为数组，jQuery 将自己主动为不同值相应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 |
| dataType | String |
预期server返回的数据类型。假设不指定，jQuery 将自己主动依据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数參数传递。可用值: "xml": 返回 XML 文档。可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包括 script 元素。 "script": 返回纯文本 JavaScript 代码。 不会自己主动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl? callback=? " jQuery 将自己主动替换 ? 为正确的函数名，以运行回调函数。 |
| error | Function | (默认: 自己主动推断 (xml 或 html)) 请求失败时将调用此方法。
这种方法有三个參数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown仅仅有当中一个有值
|
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。
设置为 false 将不会触发全局 AJAX 事件。如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在server数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息推断。 |
| processData | Boolean | (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并不是字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。假设要发送 DOM 树信息或其他不希望转换的信息，请设置为 false。 |
| success | Function | 请求成功后回调函数。
这种方法有两个參数：server返回数据，返回状态 function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
|
----------------------------------------------------------------------------------------------------
1. 程序截图：
---------------------------------------------------------------------
1.jqueryAjax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>jquryAjax1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function(){ $("#input1").keydown(function(){
$("#input1").css("background-color","#FFFFCC");
});
$("#input1").keyup(function(){ txt = $("#input1").val();
$("#span1").load("hint.jsp",{suggest:txt}); $("#input1").css("background-color","#D6D6FF");
}); $("#btn1").click(function(){ $("#p1").load("demo.txt #p1",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success"){
alert("外部数据载入成功！");
}else if(statusTxt=="error"){
alert("Error:"+xhr.status+","+xhr.statusText);
} }); }); $("#btn2").click(function(){ $.get("demo.txt #p1",function(data,status){
alert("Data:"+data+"\n Status:"+status);
}); }); $("#btn3").click(function(){ $.get("test.jsp",
{
name:"jack",
pwd:"12345" },
function(data,status){
alert("Data:"+data+"\n Status:"+status);
}); }); }); </script> </head> <body>
<p id="p1">欢迎来到 jqueryAjax 的世界！</p>
<button id="btn1">获得外部的内容</button>
<br><br>
<button id="btn2"> 查看$.get(URL,callback) </button>
<br><br>
<button id="btn3"> 查看$.post(URL,data,callback) </button> <br><br>
<p>请在以下的输入框中输入名字（a 到 z 的字符）：</p>
<p>名字 : <input type="text" id="input1" /></p>
<p>建议：<span id="span1"></span></p> </body>
</html>
2.Myhtml.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body>
This is my HTML page. <br>
</body>
</html>
3.test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%= request.getParameter("name") %>
<%= request.getParameter("pwd") %>
4.hint.jsp
<%@page import="java.io.PrintWriter"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% String params = request.getParameter("suggest");
if(params==""){
out.write("没有建议词汇");
}
else{ String[] a ={"alan","afanda","amari","binary","bbk","bank"};
StringBuffer results = new StringBuffer();
for(int i=0 ; i<a.length ; i++ ){
if(a[i].startsWith(params)){
results.append(a[i]+",");
}
} if(results.length()==0){
System.out.println("没有建议词汇");
out.write("没有建议词汇");
}else{
//去掉最后一个逗号
results.deleteCharAt(results.length()-1);
out.write(results.toString());
System.out.println(results.toString());
} }
%>
5.demo.txt
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
jquery_ajax 入门实例的更多相关文章
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- struts入门实例
入门实例 1 .下载struts-2.3.16.3-all .不摆了.看哈就会下载了. 2 . 解压 后 找到 apps 文件夹. 3. 打开后将 struts2-blank.war ...
- Vue.js2.0从入门到放弃---入门实例
最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...
- wxPython中文教程入门实例
这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下 wxPython中文教程入门实例 wx.Window 是一个基类 ...
- Omnet++ 4.0 入门实例教程
http://blog.sina.com.cn/s/blog_8a2bb17d01018npf.html 在网上找到的一个讲解omnet++的实例, 是4.0下面实现的. 我在4.2上试了试,可以用. ...
- Spring中IoC的入门实例
Spring中IoC的入门实例 Spring的模块化是很强的,各个功能模块都是独立的,我们可以选择的使用.这一章先从Spring的IoC开始.所谓IoC就是一个用XML来定义生成对象的模式,我们看看如 ...
- Node.js入门实例程序
在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...
- Java AIO 入门实例（转）
Java7 AIO入门实例,首先是服务端实现: 服务端代码 SimpleServer: public class SimpleServer { public SimpleServer(int port ...
- Akka入门实例
Akka入门实例 Akka 是一个用 Scala 编写的库,用于简化编写容错的.高可伸缩性的 Java 和 Scala 的 Actor 模型应用. Actor模型并非什么新鲜事物,它由Carl Hew ...
随机推荐
- c#利用反射实现对类中的常量进行取值和对应常量的注释
C#利用反射实现对类中的常量进行取值和对应常量的注释 项目示例:https://gitee.com/dhclly/IceDog.GenerateErrorCode 因为业务需要,项目中有大量的错误码, ...
- 28、editText只输入英文字母和'-'，用于授权码输入
InputFilter filter = new InputFilter() { @Override public CharSequence filter(CharSequence source, i ...
- 深入新版BS4源码 探索flex和工程化sass奥秘
你可能已经听说了一个“大新闻”:Bootstrap4 合并了代号为#21389的PR,宣布放弃支持IE9,并默认使用flexbox弹性盒模型.这标志着:1)前端开发全面步入“现代浏览器”的时代进一步来 ...
- 第002弹：Java 中的值传递和引用传递
在 Java 的代码开发过程中,为了尽可能提高方法的复用性,明确方法的作用,同时防止一个方法内部过于臃肿的问题,往往会创建许多方法,那么不可避免地会涉及到参数传递的问题.通常来说,我们将 Java 中 ...
- iOS学习笔记42-Swift(二)函数和闭包
上一节我们讲了Swift的基础部分,例如数据类型.运算符和控制流等,现在我们来看下Swift的函数和闭包 一.Swift函数 函数是一个完成独立任务的代码块,Swift中的函数不仅可以像C语言中的函数 ...
- 北京集训TEST13——PA（第k小数）
题目: Description [问题描述] 从n个数中选若干(至少1)个数求和,求所有方案中第k小的和(和相同但取法不同的视为不同方案).[输入格式] 第一行输入2个正整数n,k. 第二 ...
- docker学习路线
http://www.simapple.com/320.html DOCKER 官网 :https://docs.docker.com/docker-for-mac/
- Linux 下查找并删除文件命令
以查找和删除mp3为扩展的文件为例: find . -name "*.mp3" |xargs rm -rf (.表示在当前目录下执行)
- JS-日历签到
实现的功能: 首先这是前端显示的内容,没有后台的配置哈: 1.显示当前年月下的日历表: 2.今天的日期独有背景色: 3.当月今天之前的日子号数颜色变浅,表示日期已过: 4.点击日期签到:(只能点击当天 ...
- HDU 1018.Big Number-Stirling(斯特林)公式 取N阶乘近似值
最近一堆题目要补,一直咸鱼,补了一堆水题都没必要写题解.备忘一下这个公式. Stirling公式的意义在于:当n足够大时,n!计算起来十分困难,虽然有很多关于n!的等式,但并不能很好地对阶乘结果进行估 ...