AJAX 请求导致 Text.splitText 抛出错误

Question

我正在编写一个 javascript 网页，并在其中尝试发送此 Ajax 请求。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>
    <script>
     function onSubmit() {
      $.ajax({
        url: window.location.href,
        method: "POST",
        context: document.body,
        data: {newContent: $("#verseContent").contents()[0]},
        success: () => {console.log("DONE")},
        error: (err) => {console.error(err);}
      });
    }
    </script>
  </head>
  <body>
    <textarea id="verseContent"><%= content %></textarea>
    <button onClick="onSubmit()">SAVE</button>
  </body>
</html>

但它总是抛出错误：

[Error] TypeError: Can only call Text.splitText on instances of Text
    splitText (jquery.min.js:2:71316)
    i (jquery.min.js:2:71316)
    jt (jquery.min.js:2:71208)
    jt (jquery.min.js:2:71232)
    param (jquery.min.js:2:71508)
    ajax (jquery.min.js:2:75809)
    onSubmit (1:10)
    onclick (1:30)

我似乎找不到任何信息来帮助调试此问题...有人知道可能发生了什么吗？非常感谢您的任何想法、想法或任何方向。

Answer 1

您应该发送 data 的 AJAX 请求是 JSON 对象。

根据你的情况，我猜你想从 textarea 发送内容。如果为真，您可以尝试此代码：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>
    <script>
        function onSubmit() {
        $.ajax({
            url: window.location.href,
            method: "POST",
            data: {
                newContent: $("#verseContent").text()
            },
            success: () => {console.log("DONE")},
            error: (err) => {console.error(err);}
        });
    }
    </script>
</head>
<body>
<textarea id="verseContent"><%= content %></textarea>
<button onClick="onSubmit()">SAVE</button>
</body>
</html>

AJAX 请求导致 Text.splitText 抛出错误

AJAX request causing Text.splitText to throw an error

javascript

ajax

jquery

post

web-frontend