AJAX在jQuery中的应用
1. $.ajax()方法
$.ajax()方法是一个功能十分强悍的一个底层方法,基于该方法实现的$.get()和$.post()都是常用的向服务器请求数据的方法。
1.1 $.ajax()中的参数及使用方法
$.ajax()调用的语法格式为:
$.ajax([options])
其中,可选参数[options]作为$.ajax()方法中的请求设置,其格式为key/value,既包含发送请求的参数,也含有服务器响应回调的数据,常用的参数具体格式如下:
1.2 $.ajax()方法的使用实例
实例中使用的是一个简单的基于SSH框架的Java Web项目
这里我们通过一个controller来接受一个UserEntity类型的数据,然后返回一个Map类型的数据,实现页面的请求。
@Controller @RequestMapping("/user") public class UserController { @Resource private IUserService userService; @ResponseBody @RequestMapping(value="/login", method = RequestMethod.POST) public Map<String,Object> login(UserEntity user){ Map<String,Object> map = new HashMap<String,Object>(); System.out.println(user.toString()); //判断数据库中是否存在这样一个UserEntity数据 boolean loginResult = userService.isExist(user); map.put("loginResult", loginResult); return map; } }
前端代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>" rel="external nofollow" > <title>用户登录</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="<%=basePath %>css/bootstrap.css" rel="external nofollow" > </head> <body> <div> <div class="input-group"> <span class="input-group-addon" id="name_span">UserName</span> <!--从这里输入一个username--> <input name="username" type="text" class="form-control" placeholder="UserName" aria-describedby="name_span"> </div> <div class="input-group"> <span class="input-group-addon" id="password_span">PassWord</span> <!--从这里输入一个password--> <input name="password" type="password" class="form-control" placeholder="PassWord" aria-describedby="password_span"> </div> <!--提交表单--> <input type="submit" id="loginBtn" class="btn btn-default" value="Login" /> </div> </body> <script type="text/javascript" src="<%=basePath %>js/jquery-2.1.4.js"></script> <script type="text/javascript" src="<%=basePath %>js/login.js"></script> </html>
为了方面讲解,我们将AJAX代码单独放到了一个js文件中
$(function() { $("#loginBtn").click(function() { console.log("login"); var username = $("input[name=username]").val(); var password = $("input[name=password]").val(); var user = { "username" : username, "password" : password }; $.ajax({ type : "post", dataType : "json", data : user, contentType : "application/x-www-form-urlencoded;charset=UTF-8", url : "user/login", async : false, success : function(data) { if (false == data.loginResult) { alert("用户名或者密码错误,请重新登录!"); } else if (true == data.loginResult) { alert("登录成功!"); var indexUrl = window.location.protocol+"//"+window.location.host+window.location.pathname+"html/index.html"; window.location = indexUrl; } }, error : function() { alert("服务器发生故障,请尝试重新登录!"); } }); }); });
上述js代码中,在data部分构造了一个user对象,通过post方法传递给服务器时,服务器会将其解析成一个UserEntity类型的user对象(神奇吧,具体的原理我暂时也不是很懂,希望明白人在微博下方留言,不吝赐教)。当contentType设置成"application/x-www-form-urlencoded;charset=UTF-8"时,提交的是一个from表单,而不是我们常用的json对象,但是服务器返回的是一个json对象。然后我们在success后面的函数中对返回的数据进行了解析(一个布尔类型的数据),根据结构进行了简单的跳转。
2. 其他请求服务器数据的方法
$.get()方法和$.post()方法都是基于$.ajax()方法实现的向服务器请求数据的方法,使用起来比起$.ajax()方法更加简便,需要设置的参数更少,但是我们更多时候使用的仍然是$.ajax()方法,因为它的可定制程度更高,更加的灵活易用。
2.1 $.get()方法
$.get([options])
该方法在传入options时,只需要简单的是设置好url、date、success等选项即可。例如
$.get( "/user/login", {name: encodeURI($("#username").val()}, function(data){ ....省略逻辑代码 } )
由于get方法向服务器发送请求时,使用K/V格式,如果参数中含有中文字符,需要通过encodeURI()来进行转码。
2.2 $.post()方法
$.post([options])
.post()方法的使用和.post()方法的使用和.get()方法基本一致,事例如下:
$.post( "/user/login", {name: encodeURI($("#username").val()}, function(data){ ....省略逻辑代码 } )
同样是在参数中含有中文字符时,需要使用encodeURI()进行转码操作
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对小牛知识库的支持。如果你想了解更多相关内容请查看下面相关链接
本文向大家介绍详解JQuery Ajax 在asp.net中使用总结,包括了详解JQuery Ajax 在asp.net中使用总结的使用技巧和注意事项,需要的朋友参考一下 自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题。本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方,欢迎大家指正和补充。 本文
本文向大家介绍JQuery中$.ajax()方法参数详解,包括了JQuery中$.ajax()方法参数详解的使用技巧和注意事项,需要的朋友参考一下 全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML); 是指一种创建交互式网页应用的网页开发技术。 jquery中的ajax方法参数总是记不住,这里记录一下。 1.url: 要求为String类型
本文向大家介绍jquery中的ajax同步和异步详解,包括了jquery中的ajax同步和异步详解的使用技巧和注意事项,需要的朋友参考一下 之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题。最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假
本文向大家介绍jQuery中Ajax的get、post等方法详解,包括了jQuery中Ajax的get、post等方法详解的使用技巧和注意事项,需要的朋友参考一下 load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值。 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.ge
本文向大家介绍基于JQuery的Ajax方法使用详解,包括了基于JQuery的Ajax方法使用详解的使用技巧和注意事项,需要的朋友参考一下 如下所示: 以上这篇基于JQuery的Ajax方法使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。
问题内容: 甚至不确定这是否是标题问题的正确方法。我知道我把AJAX调用弄错了…这是我现在正在做的事情(顺便说一下,我正在使用ASP.NET MVC后端): 我通常将一些数据发布到操作中,该操作将加载我在响应中捕获的视图。它基本上是为操作提供一些数据,并取回一些HTML。 假设我想创建一个经过验证的Ajax调用。如何获得有关错误的验证消息?例如,一个Ajax登录表单。如果无法验证用户,我想告诉他们
本文向大家介绍jQuery Ajax中的事件详细介绍,包括了jQuery Ajax中的事件详细介绍的使用技巧和注意事项,需要的朋友参考一下 Ajax会触发很多事件。 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配。 全局事件,可以用bind来绑定,用unbind来取消绑定。这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM
问题内容: 我正在尝试创建一个Facebook应用程序,除了我用来从第一个选择框中选择的项中填充第二个框的ajax部分之外,所有其他功能都工作正常。 我正在使用jquery(v1.3.2)来完成此任务。这个ajax在我已经为其腾出空间的主机上运行得很好,但是在facebook上却无法运行。 这是我关于这个问题的问题, 画布页面网址是否必须与我的应用程序名称相同。(在我的情况下是不同的) 我在Fac