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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
Python中如何引入第三方模块
2020/05/27 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
学前教育学生自荐信范文
2013/12/31 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
python读取mat文件生成h5文件的实现
2022/07/15 Python