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为某个div加入行样式
Jun 09 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 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 文件上传全攻略
2010/04/28 PHP
php实现的ping端口函数实例
2014/11/12 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
js网页右下角提示框实例
2014/10/14 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
django中forms组件的使用与注意
2019/07/08 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
init进程的作用
2015/08/20 面试题
致垒球运动员加油稿
2014/02/16 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
小学生优秀评语大全
2014/04/22 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
教师培训简讯
2015/07/20 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS