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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jquery append与appendTo方法比较
May 24 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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 常用函数库和一些实用小技巧
2009/01/01 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
php给数组赋值的实例方法
2019/09/26 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
js实现计算器功能
2020/08/10 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[03:48]大碗DOTA
2019/07/25 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
入党积极分子思想汇报
2014/01/02 职场文书
司机职责范本
2014/03/08 职场文书
安全隐患整改报告
2014/11/06 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
vue router 动态路由清除方式
2022/05/25 Vue.js