jQuery中的Ajax实现

原创 2015年07月07日 23:23:52




<!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>
<h1></h1>
</body>
<script language="JavaScript">
$().ready(function(){
/*
* load(url,[data],[callback]);
* url:请求的服务器的资源地址
* data:向服务器端发送数据,JSON串格式.如果有此参数,就以POST方式提交数据,没有就是get方式提交数据
* callback:function(data,textStatus,xhr){}
* data:服务器端返回的数据
* textStatus:状态。succuss, error, notmodify, timeout
* xhr:XmlHttpRequest对象本身
*/
/*$("#b1").click(function(){
$("#one").load("1.jsp",{username:'gfy'},function(data,textStatus,xhr){
//alert(data);
//alert(textStatus);
//alert(xhr);
});
});*/
$("#b1").click(function(){
//1.jsp h1,h2 只获取1.jsp返回的h1、h2标记的内容
$("#one").load("1.jsp h1,h2",{username:'gfy'},function(data,textStatus,xhr){
$(":header").html(data);
});
});
});
</script>
</html>



//jsp文件:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
System.out.println(request.getMethod());
System.out.println(request.getParameter("username"));
out.write("ok");
%>



//第二种:get

<!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>
</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(url,data,callback)
*/
/*$.post("1.jsp",{username:'gfy',psw:'123'},function(data,textStatus){
$("#one").text(data);
});*/
$.post("1.jsp",$("#form1").serialize(),function(data,textStatus){
$("#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>
<h1></h1>
</body>
<script language="JavaScript">
$().ready(function(){
/*
* load(url,[data],[callback]);
* url:请求的服务器的资源地址
* data:向服务器端发送数据,JSON串格式.如果有此参数,就以POST方式提交数据,没有就是get方式提交数据
* callback:function(data,textStatus,xhr){}
* data:服务器端返回的数据
* textStatus:状态。succuss, error, notmodify, timeout
* xhr:XmlHttpRequest对象本身
*/
/*$("#b1").click(function(){
$("#one").load("1.jsp",{username:'gfy'},function(data,textStatus,xhr){
//alert(data);
//alert(textStatus);
//alert(xhr);
});
});*/
$("#b1").click(function(){
//1.jsp h1,h2 只获取1.jsp返回的h1、h2标记的内容
$("#one").load("1.jsp h1,h2",{username:'gfy'},function(data,textStatus,xhr){
$(":header").html(data);
});
});
});
</script>
</html>



//jsp文件:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
System.out.println(request.getMethod());
System.out.println(request.getParameter("username"));
out.write("ok");
%>



//第二种:get

<!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>
</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(url,data,callback)
*/
/*$.post("1.jsp",{username:'gfy',psw:'123'},function(data,textStatus){
$("#one").text(data);
});*/
$.post("1.jsp",$("#form1").serialize(),function(data,textStatus){
$("#one").text(data);
});
});
});
</script>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery实现Ajax应用

首先理解一下什么是Ajax,全称是Asynchronous Javascript And XML(异步JavaScript和XML)是一种交互式网页应用的网页开发技术。 用通俗的话说,就是当需要数据处...
  • u013045370
  • u013045370
  • 2016年05月11日 09:53
  • 1107

Ajax利用JQuery在Struts2的实现

这里有篇文章但是基本对的,有些东西需要自己写很坑爹,感觉他吧一些东西删去了。1.Struts.xml必须写上json格式和数据,不然传什么值 dataM...
  • liuzhustu
  • liuzhustu
  • 2017年03月11日 14:23
  • 358

jquery ajax 实现动态联动查询

jquery ajax 实现动态联动查询
  • sinat_24491773
  • sinat_24491773
  • 2016年03月05日 20:14
  • 3890

jquery 实现原理五:ajax

ajax模块的结构: 一, ajax 实现包括两个部分 1 基本模块ajax,一个ajax.js定义了异步请求的基本结构,主要提供了两个重要的配置 默认配置 ajaxSettings,并可拓展自定义的...
  • lihongxun945
  • lihongxun945
  • 2013年09月25日 21:09
  • 8068

jquery实现ajax无刷新分页页码控件

这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,...
  • sinat_29673403
  • sinat_29673403
  • 2017年02月28日 16:55
  • 1515

jQuery+AJAX实现纯js分页功能

使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的。这次只是拿来作为网页元素的css样式表使用...
  • whan8080
  • whan8080
  • 2015年03月21日 20:05
  • 5440

jQuery Ajax无刷新操作

废话不多说,直接上代码。你会发现,用了jQuery之后是如何简单。 //后台实例代码 ashx文件(可替换为从数据库中读取) public void ProcessReq...
  • guwei4037
  • guwei4037
  • 2013年08月04日 18:01
  • 11561

jquery ajax 二级联动

首先实现jquery ajax的二级联动 要下载个jquery.js 我在这里就不准备了 自行百度下载 背景介绍:通过部门的ID来查找部门下的所有班级 我实现二级联动的思路是:先查询所有部门 显示在页...
  • zfz823840645
  • zfz823840645
  • 2017年02月07日 17:16
  • 2376

Jquery+Json+ajax实现异步查询显示数据

JQuery,JSON,AJAX前面我都有简单介绍过,这里我用这三种技术简单实现了一个网页异步访问服务器显示返回结果的实例,原理上应该是要查询数据库,然后返回的是数据库的数据,而现在为了查看方便我只是...
  • u012882327
  • u012882327
  • 2015年09月09日 17:28
  • 7133

jQuery+ajax实现省市区下拉菜单联动(增强版)实现锁定用户所在地并且可以直接选区

之前做过一个省市区联动的下拉菜单,但是这个功能有一个缺陷,当有一个需求: 1.页面加载的时候锁定用户注册的所在地; 2.可以直接换区,不用等省份发生change时间之后才可以换区(之前版本的功能就...
  • Winter_chen001
  • Winter_chen001
  • 2017年03月30日 13:17
  • 807
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery中的Ajax实现
举报原因:
原因补充:

(最多只允许输入30个字)