AJAX在JQuery中的应用详解


Posted in jQuery onJanuary 30, 2019

AJAX在jQuery中的应用

1. $.ajax()方法

$.ajax()方法是一个功能十分强悍的一个底层方法,基于该方法实现的$.get()和$.post()都是常用的向服务器请求数据的方法。

1.1 $.ajax()中的参数及使用方法

$.ajax()调用的语法格式为:

$.ajax([options])

其中,可选参数[options]作为$.ajax()方法中的请求设置,其格式为key/value,既包含发送请求的参数,也含有服务器响应回调的数据,常用的参数具体格式如下:

AJAX在JQuery中的应用详解

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 相关文章推荐
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 #jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 #jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 #jQuery
You might like
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python pickle模块用法实例
2015/04/14 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python解释器spython使用及原理解析
2019/08/24 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
python数据抓取3种方法总结
2021/02/07 Python
英国复古服装购物网站:Collectif
2019/10/30 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
小学教师管理制度
2014/01/18 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
公司总经理岗位职责
2014/03/15 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers