Servlet--5.jQuery的Ajax方法

最新推荐文章于 2022-03-27 17:40:55 发布

慕村古楼诉

最新推荐文章于 2022-03-27 17:40:55 发布

阅读量189

点赞数 1

分类专栏：前端知识

本文链接：https://blog.csdn.net/weixin_43619912/article/details/95588414

版权

前端知识专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、在Ajax中使用JSON数据格式

package cn.gwj.controller;
/*    
    Created by IntelliJ IDEA.
    Package:cn.gwj.controller
    User:1093499975@qq.com
    Date:2019/7/4 0004
    Time:09:18
*/

import cn.gwj.entity.User;
import cn.gwj.service.impl.UserServiceImpl;
import com.alibaba.fastjson.JSONArray;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import java.util.Objects;

public class LoginServlet extends BaseController {
    public void login(HttpServletRequest request, HttpServletResponse response){
        String uName=request.getParameter("uName");
        String uPwd=request.getParameter("uPwd");
        User user=new User();
        user.setuName(uName);
        user.setuPwd(uPwd);
        user=new UserServiceImpl().getUser(user);
        Map msgMap=new HashMap();
        if(user.getId()>0 && user.getuPwd().equals(uPwd)){//用户存在且密码正确
            request.getSession().setAttribute("user",user);//登陆成功设置session
            msgMap.put("msg","登录成功");
            msgMap.put("status","true");
            msgMap.put("user",user.getuName());
            if(Objects.isNull(getServletContext().getAttribute("loginCount"))){
                getServletContext().setAttribute("loginCount",1);
            }else{
                Integer count=(Integer)getServletContext().getAttribute("loginCount");
                getServletContext().setAttribute("loginCount",count+1);
            }
        }else {
            msgMap.put("msg","登录失败，用户名或密码错误！");
            msgMap.put("status",false);
        }
        PrintWriter pw= null;
        try {
            pw = response.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        pw.println(JSONArray.toJSON(msgMap));

    }

    /**
     * 注销
     * @param request
     * @param response
     */
    public void loginOut(HttpServletRequest request,HttpServletResponse response) throws IOException {
        request.getSession().removeAttribute("user");
        response.sendRedirect(request.getContextPath()+"/view/login.jsp");
        Integer count=(Integer)getServletContext().getAttribute("loginCount");
        getServletContext().setAttribute("loginCount",count-1);
    }

}

package cn.gwj.controller;
/*    
    Created by IntelliJ IDEA.
    Package:cn.gwj.controller
    User:1093499975@qq.com
    Date:2019/7/1 0001
    Time:11:41
*/

import cn.gwj.service.impl.NewsServiceImpl;
import cn.gwj.util.Page;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

public class NewsServlet extends BaseController{
    public void list(HttpServletRequest request, HttpServletResponse response) throws SQLException, ServletException, IOException {
        int pageIndex=request.getParameter("pageIndex")==null?1:Integer.parseInt(request.getParameter("pageIndex"));
        if (pageIndex<1)
            pageIndex=1;
        Page pageData=new Page();
        pageData.setCurrPageNo(pageIndex);
        pageData.setPageSize(5);
        pageData.setTotalCount(new NewsServiceImpl().countNews());
        request.setAttribute("list",new NewsServiceImpl().getPageNews(pageData));
        request.setAttribute("pageData",pageData);
        request.getRequestDispatcher("/view/admin/index.jsp").forward(request,response);
    }
}

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/24
  Time: 15:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
</head>
<body>
<%--
数据模型 mode
服务层 service
视图层 view
--%>
<form action="/demoNews/login" method="post" >
    <input name="user"><br/>
    <input name="pwd" type="password"><br/>
    <input type="checkbox" name="autoLogin" value="1">自动登录<br/>
    <input type="button" value="登陆" onclick="btn()">
    <span id="error"></span>
    <%--<%=request.getAttribute("msg")%>--%>
</form>

<script>
    function btn() {
        var user=$("input[name=\"user\"]").val();
        var pwd=$("input[name=\"pwd\"]").val();
        var url="${pageContext.request.contextPath}/login.html?action=login";

        $.get(url,{uName:user,uPwd:pwd},function (rst) {
            console.log(rst);
            if(rst.status){
                location.href="${pageContext.request.contextPath}/admin/new.html?action=list";
            }else {
                //失败
                $("#error").text(rst.msg);
            }
        },"json")
    }

</script>
</body>
</html>

二、jQuery的Ajax方法

$.ajax() --见上一章

$.get()

$.post()

$.getJSON() .load()

……

（一）$.get()

1、语法

$.get( url [, data] [, success] [, dataType] );

参数说明

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
success	Function( PlainObject result, String textStatus, jqXHR jqxhr )	请求成功后调用的函数参数result：可选，由服务器返回的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text

2、$.get()用法

使用$.get() 实现异步交互

$.get( url, data, function( result ) {    
    // 省略将服务器返回的数据显示到页面的代码 
},"json");

以上代码等价于

$.ajax( {
	url : url,
	data : data,
	type : "get",
	success : function( result ) {
		// 省略代码
	}
},"json");

（二）$.post()

1、语法

$.post( url [, data] [, success] [, dataType] );

参数说明

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
success	Function( PlainObject result, String textStatus, jqXHR jqxhr )	请求成功后调用的函数参数result：可选，由服务器返回的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text

2、$.post()用法

使用$.post() 实现异步交互

$.post( url, data, function( result ) {
	// 省略将服务器返回的数据显示到页面的代码
},"json");

以上代码等价于

$.ajax( {
	"url" : url,
	"data" : data,
	"type" : "post",
	"success" : function( result ) {
	    // 省略代码
	}
},"json");

（三）$.getJSON()

1、语法

$.getJSON( url [, data] [, success] );

参数说明

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
success	Function( PlainObject result, String textStatus, jqXHR jqxhr )	请求成功后调用的函数参数result：可选，由服务器返回的数据

2、$.getJSON()用法

使用$.getJSON() 实现异步交互

$.getJSON( url, data, function( result ) {
	// 省略将服务器返回的数据显示到页面的代码
},"json");

以上代码等价于

$.ajax( {
    "url" : url,
    "data" : data,
    "type" : "get",
    "dataType" : "json",
    "success" : function( result ) {
	    // 省略代码
	}
});
//$.getJSON()方法只能以GET方式发送请求

三、jQuery的.load()方法

1、语法

$( selector ).load( url [, data] [, complete] );

参数说明

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
complete	Function( String responseText, String textStatus, jqXHR jqxhr )	对每个匹配元素设置完内容后都会触发的函数参数responseText：可选，服务器返回的数据

.load()不是全局函数，而是针对与选择器匹配的元素执行

包含匿名回调函数，自动将返回值设置为匹配元素的HTML内容

2、.load()用法

使用.load()实现异步交互

$( "#opt_area>ul" ).load( url, data );

以上代码等价于

$.get( url, data, function( responseText) {
	$( "#opt_area>ul" ).html( responseText );
} );

默认使用GET方式请求，除非data参数是一个对象，则使用POST方式

四、基于表单数据的Ajax请求--序列化表单

问题

需要发送表单数据时，提取表单元素的值并构造成合适的数据格式是件很烦琐的事

使用jQuery提供的方法简化处理 .serializeArray() $.param()

1、.serializeArray()

2、$.param()

将由 . serializeArray()生成的对象数组序列化成请求字符串的形式

经验：

jQuery还提供了.serialize()方法。

.serialize()内部使用$.param()对.serializeArray()做了一个简单包装。不需要中间环节时，可以更简便地完成表单数据的序列化

五、FastJSON

1、FastJSON简介

https://github.com/alibaba/fastjson/releases

2、FastJSON API

1）入口类：com.alibaba.fastjson.JSON

方法	说明
public static String toJSONString ( Object object )	将Java对象序列化成JSON字符串
public static String toJSONString ( Object object, boolean prettyFormat )	prettyFormat为true时生成带格式的JSON字符串
public static String toJSONString ( Object object, SerializerFeature… features )	可以通过参数features指定更多序列化规则
public static String toJSONStringWithDateFormat ( Object object, String dateFormat, SerializerFeature… features )	可以通过参数dateFormat指定日期类型的输出格式

2）枚举类型 SerializerFeature 定义了多种序列化属性

枚举值	说明
QuoteFieldNames	为字段名加双引号，默认即使用
WriteMapNullValue	输出值为null的字段，默认不输出
WriteNullListAsEmpty	将值为null的List字段输出为[ ]
WriteNullStringAsEmpty	将值为null的String字段输出为“”
WriteNullNumberAsZero	将值为null的数值字段输出为0
WriteNullBooleanAsFalse	将值为null的Boolean字段输出为false
SkipTransientField	忽略transient字段，默认即忽略
PrettyFormat	格式化JSON字符串，默认不格式化

示例：

// 包含值为 null 的字段，数值为 null  输出0，String 为 null 输出“”
String  strJSON = JSON.toJSONString ( javaObject, 
                                      SerializerFeature.WriteMapNullValue,
                                      SerializerFeature.WriteNullNumberAsZero, 
                                      SerializerFeature.WriteNullStringAsEmpty );

六、jQuery让渡$操作符

问题：

jQuery不是唯一使用 $ 的脚本库，项目中有其他同样使用 $ 的脚本库时就会引起冲突

// Prototype的 $ 会覆盖jQuery的 $
<script type="text/javascript" src="../js/jquery-1.12.4.min.js" />
<script type="text/javascript" src="../js/prototype.js" />
或者
// jQuery的 $ 会覆盖Prototype的 $
<script type="text/javascript" src="../js/prototype.js" />
<script type="text/javascript" src="../js/jquery-1.12.4.min.js" />

jQuery定义了jQuery.noConflict()方法，放弃对$的使用权，以免与其他脚本库冲突
jQuery.noConflict(); // 让渡$使用权，后续jQuery代码使用jQuery代替$
jQuery( document ).ready( … );
或者重新指定一个替代符号：
var  $j = jQuery.noConflict(); // 让渡$使用权，并指定用 $j 代替$
$j( document ).ready( … );
改变了jQuery的编码风格，烦琐且不利于重用已有代码

jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
jQuery( document ).ready( function( $ ) {
    // 在这里继续使用$编写jQuery代码
    $( "#show" ).click( … );
} );
或者
jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
( function( $ ) {
    // 在这里继续使用$编写jQuery代码
    $( document ).ready( function() {
        $( "#show" ).click( … );
    } );
} )( jQuery );

慕村古楼诉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Servlet--5.jQuery的Ajax方法

一、在Ajax中使用JSON数据格式package cn.gwj.controller;/* Created by IntelliJ IDEA. Package:cn.gwj.controller User:[email protected] Date:2019/7/4 0004 Time:09:18*/...
复制链接

扫一扫