1.  jQuery post() 和 jQuery get()

1.1 语法： 

$.get(URL,data,function(data,status,xhr),dataType)

1.2 参数：

URL 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。

function(data,status,xhr)

可分别为succes, error 等来定义函数。即对应请求的状态有对应的函数

 可选。规定当请求成功时运行的函数。
额外的参数：
  • data - 包含来自请求的结果数据
  • status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
  • xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。
默认地，jQuery 会智能判断。
可能的类型：
  • "xml" - 一个 XML 文档
  • "html" - HTML 作为纯文本
  • "text" - 纯文本字符串
  • "script" - 以 JavaScript 运行响应，并以纯文本返回
  • "json" - 以 JSON 运行响应，并以 JavaScript 对象返回
  • "jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调

1.3 注意:

get()方法和get方法的用法一样，只是底层的提交凡是不同。

 

2. 测试 post() 和 get()方法

2.1 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd">
 
    <!-- 自动扫描指定的包，下面所有注解类交给IOC容器管理 -->
    <context:component-scan base-package="com.kuang.controller"/>
    <mvc:default-servlet-handler />
    <mvc:annotation-driven />
 
    <!-- 视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">
        <!-- 前缀 -->
        <property name="prefix" value="/WEB-INF/jsp/" />
        <!-- 后缀 -->
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

2.2  ajaxController

@Controller
public class AjaxController {
 
    @RequestMapping("/a1")
    public void ajax1(String name , HttpServletResponse response) throws IOException {
        if ("admin".equals(name)){
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }
 
}

 

2.3 JQuery

<script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>

2.4 jsp页面测试

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/a1",
                data:{'name':$("#txtName").val()},
                success:function (data,status) {
                    alert(data);
                    alert(status);
                }
            });
        }
    </script>
  </head>
  <body>
 
  <%--onblur：失去焦点触发事件--%>
  用户名:<input type="text" id="txtName" onblur="a1()"/>
 
  </body>
</html>

2.5 测试项目

启动tomcat 测试，当鼠标离开输入框的时候，触发一个事件，会发送一个ajax请求。

 

3. jQuery ajax()方法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

3.1 语法

$.ajax({name:value, name:value, ... })

3.2 参数

jQuery.ajax(...)
部分参数：

基本参数
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据

timeout：设置请求超时时间（毫秒）

accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型

函数

beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)

默认值

contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
sync：布尔值 默认是true
global：布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。

dataType：将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去行。
"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数