jquery的ajax实现方式
在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get()。
首先我们看$.get():
{ name: "cssrain", time: "2008/01/21" }, //要传递的数据
function(data){
alert("返回的数据: " + data);
}
)
然后看$.post():
跟$.get()格式一样.
{ name: "cssrain", time: "2008/01/21" }, //要传递的数据
function(data){
alert("返回的数据: " + data);
}
)
上面2种方式的区别应该就是 请求方式不同(一个get 一个post).
最后我们看$.ajax():
url:'Accept.jsp',
type:'post', //数据发送方式
dataType:'html', //接受数据格式 (这里有很多,常用的有html,xml,js,json)
data:'text='+$("#name").val()+'&date='+new Date(), //要传递的数据
error: function(){ //失败
alert('Error loading document');
},
success: function(msg){ //成功
alert( "Data Saved: " + msg );
}
});
实例
前台jsp部分的代码如下:...
票数:
<a onclick=myvote(<%=id%>); href='javascript:;'">投票</a>
...
js部分的代码如下
$.post("vote.jsp", { id: id },
function(data){
eval("var data="+data);
if (data.issucc=="0"){
alert(data.mess)
}else{
//alert("更新页面");
$("#i"+data.myid).html(data.votenum);
}
});
}
返回数据为json
后台返回的json数据如下
{issucc:,mess:”“,votenum:,myid:}
issucc:是否成功
mess:信息,主要是错误信息,比如没登录,超过限制等
votenum:投票后的得票总数
myid:投票的id,用于更新页面的投票数
一个注册登录实例
js
login.jsp返回的类型为text形式,正确时是“OK”,错误时是
“error”。
var password;
var result;
$(document).ready(function(){
$("#load").hide();
$("#success").hide();
$("#error").hide();
});
$(document).ready(function(){
$("#button").click(function(){
$("#error").hide();
$("#load").show("slow");
userName = $("#userName").val();
password = $("#password").val();
$.ajax({type: "post",
url: "login.jsp",
dataType: "html",
data: "userName="+userName+"&password="+password,
success: function(result){
var res = String($.trim(result));
if(res=="OK"){
$("#myTable").hide("slow");
$("#success").show("slow");
}else if(res=="error"){
$("#error").show("slow");
$("#load").hide("slow");
}else{
alert("返回异常");}
}
});
});
});
jsp页面
第一种responseText格式
<%
String userName = request.getParameter("userName");
String password = request.getParameter("password");
if(password.equals("longleg")&&userName.equals("thy")){
out.print("OK");
}else{out.print("error");}
%>
jquery的ajax实现方式的更多相关文章
- 使用jquery通过AJAX请求方式,后台返回了当前整个HTML页面代码
该结果分为多种情况: 1.当前项目使用了interceptor/filter,拦截或者过滤了特定请求. 2.在HTML页面使用了表单提交,没有对表单的“onsubmit”事件做return false ...
- Spring MVC ajax提交方式
使用jquery的ajax的方式来提交 第一种,以json对象的形式提交 var jsonData = { "name" : "zhangsan", " ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
- jQuery中ajax的4种常用请求方式
jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...
- jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示
1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...
- 通过XMLHttpRequest和jQuery实现ajax的几种方式
AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...
- jquery的ajax和原始的ajax这两种方式的使用方法
jquery的ajax是对原始的ajax进行的封装,方便用户的使用.下面用代码分别举例各自的使用方式. jquery的ajax发送和接收xml数据格式. $.ajax({ type: "PU ...
- 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
随机推荐
- JavaScript之DOM查询
DOM查询 - 通过具体的元素节点来查询 - 元素.getElementsByTagName() - 通过标签名查询当前元素的指定后代元素,返回数组 - 元素.childNodes - 获取当前元素的 ...
- Ubuntu14.04安装opencv2.4.13
本文参考相关链接:http://blog.csdn.net/honyniu/article/details/46390097 系 统:Ubuntu 14.04 x64 opencv版本:2.4.1 ...
- 10+ Best Responsive HTML5 AngularJS Templates
http://www.responsivemiracle.com/collective/best-responsive-html5-angularjs-templates/
- 【转】谈谈 iOS 中图片的解压缩
转自:http://blog.leichunfeng.com/blog/2017/02/20/talking-about-the-decompression-of-the-image-in-ios/ ...
- OpenCV代码提取: threshold函数的实现
threshold algorithm: The simplest image segmentation method. All thresholding algorithms take a sour ...
- RHCE7认证学习笔记17——KickStart安装系统
一.自动化安装系统工具 1.Cobbler 另一个自动化安装工具: 2.Kickstart 二.使用kickstart自动化安装系统 服务器安装的软件: 1.dhcp服务 [root@lin ...
- Django学习笔记(一):环境安装与简单实例
Django学习笔记(一):环境安装与简单实例 通过本文章实现: Django在Windows中的环境安装 Django项目的建立并编写简单的网页,显示欢迎语与当前时间 一.环境安装 结合版本兼容性等 ...
- Linux-获得命令帮助man
date:显示当前系统时间,修改时间 clock,hwclock:显示硬件时间 cal:calendar,查看日历 计时器靠晶体振荡器来完成计时 Linux: 实时时钟,rtc,real time c ...
- #Spring实战第二章学习笔记————装配Bean
Spring实战第二章学习笔记----装配Bean 创建应用对象之间协作关系的行为通常称为装配(wiring).这也是依赖注入(DI)的本质. Spring配置的可选方案 当描述bean如何被装配时, ...
- 梳理 Opengl ES 3.0 (一)宏观着眼
Opengl ES 可以理解为是在嵌入式设备上工作的一层用于处理图形显示的软件,是Opengl 的缩水版本. 下图是它的工作流程示意图: 注意图中手机左边的EGL Layer Opengl ES是跨平 ...