<!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.3.1.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(){
$("#b1").click(function(){
// /*
// * $.get("get.jsp",jsonObj,function(data,textStatus)
// * * 通过远程 HTTP GET 请求载入信息
// * * 参数1:请求的路径
// * * 参数2:发送到服务器的数据格式:{key1:value2,key2:value2}
// * * 参数3:function(data,textStatus)
// * * data:服务器返回的数据
// * * textStatus:通信的状态 其值可能为: succuss, error, notmodify, timeout
// *
// * * 方法的返回值是XMLHttpRequest对象
// */
// var jsonObj={
// username:$("#username").val(),
// psw:$("#psw").val()
// }
//
// $.get("get.jsp",jsonObj,function(data,textStatus){
// alert(data);
// $("#one").text(data);
// });
/******************************************************************************************************/
// /*
// * $.post("get.jsp",jsonObj,function(data,textStatus)
// * * 通过远程 HTTP post 请求载入信息
// * * 参数1:请求的路径
// * * 参数2:发送到服务器的数据格式:{key1:value2,key2:value2}
// * * 参数3:function(data,textStatus)
// * * data:服务器返回的数据
// * * textStatus:通信的状态 其值可能为: succuss, error, notmodify, timeout
// *
// * * 方法的返回值是XMLHttpRequest对象
// */
// var jsonObj={
// username:$("#username").val(),
// psw:$("#psw").val()
// }
//
// $.post("get.jsp",jsonObj,function(data,textStatus){
// alert(data);
// $("#one").text(data);
// });
/******************************************************************************************************/
$.post("get.jsp",$("#form1").serialize(),function(data,textStatus){
alert(data);
$("#one").text(data);
});
});
});
</script>
</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.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(){
$("#b1").click(function(){
/*
* $("#one").load("load01.jsp",function(data,textStatus,xmlHttpRequest)
* * 第一个参数:请求的路径
* * 第二个参数:发送到服务器的数据:格式{key1:value1,key2:value2}
* * 第三个参数:回调函数 function(data,textStatus,xmlHttpRequest)
* * data:服务器返回的数据
* * textStatus:通信的状态 其值可能为: succuss, error, notmodify, timeout
* * xmlHttpRequest:对象
*
* * 如果没有传递参数 使用get 否则使用post
*
*/
var jsonObj={
username:$("#username").val(),
psw:$("#psw").val()
}
$("#one").load("load01.jsp h1,h2",jsonObj,function(data,textStatus,xmlHttpRequest){
alert(data);
//alert(textStatus);
});
});
});
</script>
</html>
分享到：
相关推荐
本文将深入探讨`jQuery`中的`POST`和`GET`异步调用方式。 1. **GET方式** `GET`是最常见的HTTP请求方法，通常用于获取资源。在jQuery中，我们可以使用`$.get()`函数发起GET请求。它的基本语法如下： ```...
在“jQuery异步加载页面”的场景中，我们通常指的是利用jQuery的Ajax功能来实现页面内容的动态加载，以提高用户体验，减少网络传输负担。这种技术尤其适用于选项卡式布局，因为用户通常只需看到一两个选项卡的内容，...
异步加载（Async Load）是指在用户需要时才获取相关数据，而不是在初始化时一次性加载所有数据。这种加载方式对于处理大数据量的树结构非常有效，可以减少页面加载时间，提高用户体验。ZTree通过异步加载策略，只在...
本篇文章将深入讲解jQuery异步加载页面的概念、原理及其实现方式。 ### 1. 异步加载的优势 传统的网页加载方式是同步的，即用户点击链接或按钮后，浏览器会重新发送请求并加载整个页面。这种做法效率低下，特别是...
总结起来，jQuery 的异步加载应用涉及了 `$.ajax()`、`$.get()`、`$.post()`、`$.fn.load()` 等方法，以及相关的回调函数和事件处理。通过理解和熟练运用这些知识点，开发者可以创建出更加高效、互动性强的Web应用。
jQuery 是一款非常流行的 JavaScript 库，它简化了JavaScript的许多操作，包括DOM操作、事件处理以及最重要的——异步数据访问。在Web开发中，异步访问，尤其是AJAX（Asynchronous JavaScript and XML）技术，允许...
jQuery的$.ajax()方法是实现异步加载的基础，它能够发起Ajax（异步JavaScript和XML）请求，与服务器进行数据交互。 **方法一：使用$.ajax()** 1. **引入jQuery库**：确保HTML文件中已包含jQuery库的链接，如`...
load()方法的GET方式提交数据简单直观，但不适合传递大量数据或敏感信息，因为这些信息会出现在URL中，可能被记录和暴露。 接下来，我们讨论$.get()方法，这是jQuery提供的另一个异步HTTP GET请求的方法。与load()...
除了$.ajax()和$.get()、$.post()，jQuery还有$.getJSON()和$.load()等方法，分别用于获取JSON数据和加载HTML片段。 在实际项目中，我们可能还需要处理异步请求的状态，比如在请求正在进行时显示加载指示器，或者在...
本文将详细介绍使用jQuery AJAX实现三种不同方式的前后台数据传输，以及如何处理界面内容的传值和返回值。 1. **基本的AJAX调用** jQuery提供了`$.ajax()`方法，它是所有其他AJAX功能的基础。例如，我们可以使用...
综上所述，jQuery EasyUI 的异步树组件是一种高效且灵活的展示层级数据的方式，通过合理的配置和事件处理，能够满足各种复杂的前端应用场景。在实际开发中，我们需要结合具体的业务需求，充分利用 EasyUI 提供的功能...
AJAX（Asynchronous JavaScript and XML）是jQuery中最常用的数据耦合方式，它允许我们在不刷新整个页面的情况下与服务器进行异步通信。通过jQuery的`$.ajax()`函数，我们可以设置请求类型（GET或POST）、URL、数据...
在这个框架中，表单提交和异步提交是两种重要的用户交互方式。本文将深入探讨这两种方法及其在实际开发中的应用。 首先，我们来看传统的表单提交。在ASP.NET MVC3中，表单提交是基于HTTP协议的POST或GET请求。当你...
jQuery的Ajax方法主要包括`$.ajax()`, `$.get()`, `$.post()`, `$.getJSON()`等，它们用于与服务器进行异步数据交换。在这里，我们将主要关注`$.ajax()`，因为它是最全面也是最灵活的Ajax方法。 ```javascript $....
`jQuery` 的 `load()` 方法在处理简单的数据加载场景时非常方便，但如果需要更复杂的异步操作，比如文件上传、自定义HTTP头或跨域请求，可能需要使用 `$.ajax()` 或 `$.get()`、`$.post()` 等更强大的方法。...
HTML5异步上拉加载（Pull-to-Load）是一种常见的网页滚动加载更多内容的技术，它在用户滚动到页面底部时自动触发，通过JQuery AJAX实现数据的动态获取和页面更新。这种技术通常用于社交媒体、新闻网站或者有大量列表...
为了实现异步加载数据，我们可以利用`load()`方法，该方法允许我们向服务器发送Ajax请求，并将返回的内容插入到指定的DOM元素中。当用户点击一个新的选项卡时，我们可以在切换事件中触发Ajax请求，加载对应内容。 `...
`load()`方法是jQuery中一个非常强大的工具，它简化了异步加载和操作远程数据的过程。通过灵活运用其参数，开发者可以轻松地构建出响应快速、交互流畅的动态网页。理解并掌握`load()`方法的使用，对于提高前端开发...
总结来说，jQuery的异步刷新机制是通过`$.ajax()`、`$.get()`、`$.post()`等方法实现的，它们提供了灵活的配置选项和简洁的API，使得开发者能够轻松地实现实时数据更新和页面的局部刷新。在实际项目中，合理利用这些...
首先，Jquery使用`$.ajax()`函数进行异步数据请求，这是与后台交互的基础。在示例代码中，可以看到`$.ajax()`被用来发送POST请求到后台处理表单数据。`url`参数定义了请求的目标地址，`type`参数指定了HTTP请求类型...