jQuery--Ajax之ajax()方法详解

最新推荐文章于 2024-03-13 07:00:00 发布

吴声子夜歌

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量911

点赞数 4

分类专栏： jQuery web 文章标签： jQuery Ajax $.ajax()

本文链接：https://blog.csdn.net/cold___play/article/details/102007141

版权

web 同时被 2 个专栏收录

41 篇文章 4 订阅

订阅专栏

jQuery

30 篇文章 2 订阅

订阅专栏

$.ajax()方法：

$.ajax()方法是jQuery最底层的Ajax实现。其语法格式如下：

$.ajax(options)

该方法只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value形式存在，所有参数都是可选的。

参数名称	类型	说明
async	Boolean	是否为异步请求（默认为true）
contentType	String	发送至服务器时内容的编码类型。（默认为"application/x-www-form-urlencoded"）
url	String	（默认为当前页面地址）发送请求的地址
type	String	请求方式（POST或GET）默认为GET
timeout	Number	设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置
data	Object或String	发送到服务器的数据。如果已经不是字符串，将自动转换字符串格式。GET请求中将附加在URL后。放置这种自动转换，可以查看processData选项。对象必须为key/value格式。例如{key1:“value1”,key2:“value2”}转换为key1=value1&key2=value2.如果是数组，jQuery将自动为不同值对应同一个名称
dataType	String	预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用jQuery处理 html：返回纯文本HTML信息：包含的script标签会在插入DOM时执行 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意，在远程请求时（不再同一个城下），所有的POST请求都转换为GET请求 json：返回JSON数据 jsonp：返回JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，jQuery将自动替换后一个“？”为正确函数名，以执行回调函数 text:纯文本字符串
beforeSend	Function	发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest是唯一的参数
complete	Function	请求完成后调用的回调函数（请求失败或成功均调用），参数为XMLHttpRequest对象和一个描述成功请求类型的字符串
success	Function	请求成功后调用的回调函数，有两个参数。 data：由服务器返回，并根据dataType参数进行处理后的数据 textStatus：描述状态的字符串
error	Function	请求失败时调用的函数。该函数有三个参数。 XMLHttpRequest对象、错误信息、捕获的错误对象（可选）
global	Boolean	默认为true。表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件，AjaxStart或AjaxStop可用用于控制各种Ajaxshijian

示例：
主页面：

<%--
  Created by IntelliJ IDEA.
  User: 19798
  Date: 2019/10/3
  Time: 10:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="<%=request.getContextPath()%>/js/jquery-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //post请求
            $("#ajaxId").on("click", function () {
                $.ajax(
                    {
                        url:"response.jsp",
                        async:"true",
                        type:"POST",
                        data:{"username":"Hello", "password":"123456"},
                        dataType:"json",
                        success:function (data) {
                            $("#resText").html(data.username + ":" + data.password);
                        },
                        error:function () {
                            alert("资源获取失败！")
                        }
                    }
                );
            });
        });
    </script>
</head>
<body>
    <button id="ajaxId" value="getAjax">getAjax</button>
    <div id="resText"></div>
</body>
</html>

响应页面response.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    String jsonStr = "{\"username\":\"" + username + "\",\"password\":\"" + password +"\"}";
    response.getWriter().write(jsonStr);
%>

点击按钮，页面显示：
在这里插入图片描述

吴声子夜歌

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery--Ajax之ajax()方法详解

$.ajax()方法：$.ajax()方法是jQuery最底层的Ajax实现。其语法格式如下：$.ajax(options)该方法只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value形式存在，所有参数都是可选的。参数名称类型说明asyncBoolean是否为异步请求（默认为true）conten...
复制链接

扫一扫

专栏目录