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实现的简单在线计算器功能
May 11 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery检测上传文件大小示例
Apr 26 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
实用函数2
2007/11/08 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php封装一个异常的处理类
2017/06/08 PHP
javascript中typeof的使用示例
2013/12/19 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
python操作字典类型的常用方法(推荐)
2016/05/16 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python安装scipy的方法步骤
2019/06/26 Python
python英语单词测试小程序代码实例
2019/09/09 Python
如何获取Python简单for循环索引
2019/11/21 Python
深入了解Python enumerate和zip
2020/07/16 Python
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
办公自动化专业大学生职业规划书
2014/03/06 职场文书
学校标语大全
2014/06/19 职场文书
法学专业求职信范文
2015/03/19 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
Python天气语音播报小助手
2021/09/25 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
Linux中文件的基本属性介绍
2022/06/01 Servers