使用 jquery 通过单个 ajax 请求发送数组和其他数据答案

【问题标题】：Sending array and other data with a single ajax request with jquery使用 jquery 通过单个 ajax 请求发送数组和其他数据
【发布时间】：2018-12-09 14:10:18
【问题描述】：

我有一个 java servlet，它接收来自我的页面的所有请求并以 json 格式返回一些数据。我很确定 servlet 没问题，但我不明白我在脚本中失败的地方。该脚本有一个动作参数，它是一个字符串，我需要在 servlet 中了解要做什么，在这种情况下，我还需要传递 2 个数组（1 个 int 数组和 1 个 String）。 servlet 告诉我数组的 json 格式不正确。 js脚本：

$(document).ready(
$.ajax({
        url: "Controller",
        type: "POST",
        data: {action: "load",
               subjects: getSubjects(),
               days: getDays()
              },
        dataType: "json",
        success: function (result) {
            //do stuff

            }
        },
        error: function (xhr, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    }));

Json 解析是用 gson 完成的：

Integer[] days = gson.fromJson(request.getParameter("days"), Integer[].class);
String[] subjects = gson.fromJson(request.getParameter("subjects"), String[].class);

我尝试将两个数组都为空并且它可以工作，但如果一个或两个包含它不包含的东西。 P.s：我在函数中创建数组并返回它们 P.s.2：元素通过推送添加到数组中 P.s.3：我在互联网上搜索了很多，但在最新版本的 jquery 中，很多东西发生了变化，过去的答案不起作用。

编辑：我尝试使用 JSON.stringify(getSubjects) 和 JSON.stringify(getDays) 但它不起作用

感谢您的关注:)

【问题讨论】：

标签： javascript jquery ajax servlets

【解决方案1】：

我认为您的 getSubjects() 和 getDays() 函数在您需要 JSON 字符串时返回一个数组。您可以使用 JSON.stringify() 生成有效的 JSON 字符串。

在处理服务器请求时，请务必检查浏览器开发者工具的网络选项卡（单击 F12 在 Firefox 和 Chrome 等浏览器上打开它们）。

/*
Wrong Way - Passing array as a parameter
In this way you send the parameters:

  action: load
  subjects[]: 1
  subjects[]: 2
  subjects[]: 3
  days[]: 1
  days[]: 2
  days[]: 3

*/

$.ajax({
    url: "Controller",
    type: "POST",
    data: {
        action: "load",
        subjects: [1, 2, 3],
        days: [1, 2, 3]
    },
    dataType: "json",
    success: function (result) {
        //do stuff
        console.log(result);
    },
    error: function (xhr, thrownError) {
        console.error(xhr.status, thrownError);
    }
});

/*
Correct Way - Passing JSON string as a parameter
In this way you send the parameters:

  action: load
  subjects: [1,2,3]
  days: [1,2,3]

*/
$.ajax({
    url: "Controller",
    type: "POST",
    data: {
        action: "load",
        subjects: JSON.stringify([1, 2, 3]),
        days: JSON.stringify([1, 2, 3])
    },
    dataType: "json",
    success: function (result) {
        //do stuff
        console.log(result);
    },
    error: function (xhr, thrownError) {
        console.error(xhr.status, thrownError);
    }
});

编辑

完整的工作示例代码：

文件Test.java

// Import required java libraries
import java.util.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import com.google.gson.*;
import com.google.gson.Gson;

// Extend HttpServlet class
@WebServlet("/Test")
public class Test extends HttpServlet {

    public void init() throws ServletException {}

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // Set response content type
        response.setContentType("text/html");

        // Actual logic goes here.
        PrintWriter out = response.getWriter();
        out.println("Test");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Gson gson = new Gson();
        Integer[] days = gson.fromJson(request.getParameter("days"), Integer[].class);
        String[] subjects = gson.fromJson(request.getParameter("subjects"), String[].class);

        // Set response content type
        response.setContentType("text/html");

        // Actual logic goes here.
        PrintWriter out = response.getWriter();
        out.println(
            "days : \"" + Arrays.toString(days) + "\"<br>" +
            "subjects : \"" + Arrays.toString(subjects) + "\"<br>"
        );
    }

    public void destroy() {
        // do nothing.
    }
}

文件text-ajax.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery.ajax({
                url: "http://localhost:8080/Test",
                type: "POST",
                data: {
                    action: "load",
                    subjects: JSON.stringify(["a", "b", "c"]),
                    days: JSON.stringify([1, 2, 3])
                },
                /*Just to be sure*/
                contentType : "application/x-www-form-urlencoded; charset=UTF-8",
                dataType: "json",
                success: function (result) {
                    console.log(result);
                },
                error: function (xhr, thrownError) {
                    console.error(xhr.status, thrownError);
                }
            });
        </script>
    </body>
</html>

【讨论】：

是的，他们返回数组，我尝试使用 JSON.stringify(getSubjects()) 解析函数的结果，但没有成功
你可以尝试在 ajax 上添加 contentType : "application/x-www-form-urlencoded; charset=UTF-8", 选项，但这是默认设置，任何其他问题都与 ajax 无关。检查我添加的工作示例。
idk 现在它是如何工作的，而我没有改变任何东西。无论如何，谢谢，如果我无法通过 html 解决 sucjects 和 days 的检索问题，我想我会有一个新帖子 eheh
Tomcat 需要重启几次：P