在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get()。 
首先我们看$.get():

.代码如下:
$.get("test.jsp", 
{ name: "cssrain", time: "2008/01/21" }, //要传递的数据 
function(data){ 
alert("返回的数据: " + data); 

然后看$.post(): 
跟$.get()格式一样.

.代码如下:
$.post("test.jsp", 
{ name: "cssrain", time: "2008/01/21" }, //要传递的数据 
function(data){ 
alert("返回的数据: " + data); 

上面2种方式的区别应该就是 请求方式不同(一个get 一个post). 
最后我们看$.ajax():

.代码如下:
$.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部分的代码如下:... 
票数:

.代码如下:
<span id="i<%=id%>"><%=vote_number%></span><br/> 
<a onclick=myvote(<%=id%>); href='javascript:;'">投票</a> 

... 
js部分的代码如下

.代码如下:
function myvote(id){ 
$.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 userName; 
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格式

.代码如下:
<%@ page language="java" pageEncoding="gb2312"%> 
<% 
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实现方式的更多相关文章

  1. 使用jquery通过AJAX请求方式,后台返回了当前整个HTML页面代码

    该结果分为多种情况: 1.当前项目使用了interceptor/filter,拦截或者过滤了特定请求. 2.在HTML页面使用了表单提交,没有对表单的“onsubmit”事件做return false ...

  2. Spring MVC ajax提交方式

    使用jquery的ajax的方式来提交 第一种,以json对象的形式提交 var jsonData = { "name" : "zhangsan", " ...

  3. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  4. jQuery中ajax的4种常用请求方式

    jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...

  5. jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示

    1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...

  6. 通过XMLHttpRequest和jQuery实现ajax的几种方式

    AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...

  7. jquery的ajax和原始的ajax这两种方式的使用方法

    jquery的ajax是对原始的ajax进行的封装,方便用户的使用.下面用代码分别举例各自的使用方式. jquery的ajax发送和接收xml数据格式. $.ajax({ type: "PU ...

  8. 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  9. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

随机推荐

  1. Spring 的好处?

    1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实现如权限拦截,运行期监 ...

  2. python2.7入门---函数

        不是说现在的高级程序员都是秉承着用最少的代码实现功能么,那么,怎么才能使代码少呢?好吧,不装哔~~~了,这一波操作我说不来,咱们直接来看内容.首先,函数是组织好的,可重复使用的,用来实现单一, ...

  3. 12 TCP服务器 进程 线程 非阻塞

    1.单进程服务器 from socket import * serSocket = socket(AF_INET, SOCK_STREAM) # 重复使用绑定的信息 serSocket.setsock ...

  4. java中array,arrayList,iterator;

    Array        String []a = new String[10] ;  a[0] = "test" ; String []a = new String[]{&quo ...

  5. nexys4-DDR开发板温度传感器ADT7420U

    1. 用这个板子做个什么功能来学习?板子上有个温度传感器,看下官方是否有例程,板子售价1780元,相当的贵,下面是I2C接口, 看下芯片的引脚图 2. 资料下载地址,得注册账号 https://ref ...

  6. 指纹识别人脸识别 iOS

    //1.判断iOS8及以后的版本 if([UIDevice currentDevice].systemVersion.doubleValue >= 8.0){ //从iPhone5S开始,出现指 ...

  7. 位运算 & 网络序字节序

    一.初识位运算 位运算,见词明意,二进制运算,通常需要将运算数转换为二进制再进行处理,如果是在程序语言中则无需自己进行进制转换,基本的位操作符有如下几种:与(&).或(|).异或(^).取反( ...

  8. ABP框架插件开发

    http://personball.com/abp/2017/08/21/abp-how-to-use-plugin

  9. 多个excel合并(excel2007)

    1.新建一个空的excel文件,在需要合并的目录下. 2.右键点击sheet1,点击查看代码 3.执行此段代码 Sub 合并当前目录下所有工作簿的全部工作表() Dim MyPath, MyName, ...

  10. Turtle模块,一个超精简但功能齐全的绘图包

    先上官方链接https://docs.python.org/3.3/library/turtle.html 再上一个GitHub上别人做的一个小程序,画小猪佩琦的,里面用到了大量常用的turtle接口 ...