jQuery AJAX简单应用_通过 jquery 使用 ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/iamcgt/article/details/72886270

本文详细介绍了jQuery中的AJAX功能，包括如何使用$.ajax()方法发送GET和POST请求，以及如何处理不同类型的响应数据。同时提供了客户端和服务端的具体实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

发送数据到服务器

默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

数据类型

（1）$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。

（2）通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

（3）和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，

（4）如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。

（5）如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。

基本语法

封装属性

需要封装的属性包括：

类型：type

地址：url

是否同步：async

参数：data

请求数据类型：dataType

请求成功回调函数：success

请求失败回调：error

这里写图片描述

框架分析

属性	说明
常用的属性包括	type、url、async、data、dataType、jsonp、success、error
type	请求类型，取值包括：post/get
url	请求连接地址
async	是否异步执行，取值包括：true/false(同步/异步)
data	请求的参数，格式：param=value¶m=value
dataType	响应值类型，取值包括：xml/html/script/json/jsonp/text
jsonp	跨域请求时候，重置请求回调函数名称
success/error	响应成功需要执行的回调函数/相应失败需要执行的回调函数

简单应用

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
    $(document).ready(function () {
        var data = {
            type:"get",
            url:"Servlet",
            async:true,
            data:"name=cgt&psd=123",
            dateType:"json",
            success:function (data) {
                console.log("收到数据:"+data);
            },
            error:function () {
                console.log("出问题了");
            }
        };
        $.ajax(data);
    })

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

服务器端

package com.test.servlet;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by cgt on 2017/6/3.
 */
@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
    @Override
    public void init() throws ServletException {
        System.out.println("成功连接到Servlet");
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("doGet");
        resp.setCharacterEncoding("UTF-8");
        resp.getWriter().write("已成功以GET方法连接");
        String name = req.getParameter("name");
        String psd = req.getParameter("psd");
        System.out.println("name="+name);
        System.out.println("psd="+psd);

    }

   @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       System.out.println("doPost");
       resp.setCharacterEncoding("UTF-8");
       resp.getWriter().write("已成功以POST方法连接");
       String name = req.getParameter("name");
       String psd = req.getParameter("psd");
       System.out.println("name="+name);
       System.out.println("psd="+psd);
    }
}