JQuery AJAX 的点击事件未执行

Question

我正在尝试制作一个可以通过该网站更新页面上的文本字段的网站。在站点的 'admin' 页面上，我允许用户在按下按钮时通过运行发出 AJAX 请求来设置字段。但是，按下按钮后没有任何反应。

我正在使用 Express.js + E.js + JQuery.

admin.ejs

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" type="text/css" href="css/admin.css">
    <title>Manage the website</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
            $("#submitButton").click(function(){
                $.ajax({
                    url: 'updateData',
                    type: 'POST',
                    data: {
                        text: 'email@example.com',
                        message: 'hello world!'
                    },
                });
            });
        });
    </script>
</head>


<header>
    <!-- Put partial includes here -->
</header>

<div class="topPage">


  <h1>Hello, <%= firstName %>!</h1>
<p1>
    Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>

<div class="homepage">
    <div class="information">
        <h1>
            Homepage variables
        </h1>
        <p1>
            Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
        </p1>
        <hr>
    </div>
    <div class="form">
        <label>
            Change the 'body' of 'homepage'
        </label>

        <form action="javascript:void(0)">
            <input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
            <input type="submit" id="submitButton">
        </form>

    </div>

</div>

<script>

</script>


</html>

我将表单的操作设置为 void 以确保页面不会重新加载，但我仍然需要 Ajax 才能工作。

在 website.js 文件（Express 应用程序所在的位置）中，我 console.log() 请求正文以确保它通过。没有任何记录。

website.js

app.post('/updateData', async (req, res) => {
    console.log(req.body)
})

按下表单提交按钮时 ajax 应该运行。

总的来说，我是 Web 开发的新手，所以非常感谢您的帮助！

谢谢！

Answer 1

id="submitButton" 应该是一个按钮，而不是输入。更改输入 id 标签，并在该表单内添加一个按钮并将 "submitButton" 作为 ID

希望对您有所帮助

JQuery AJAX 的点击事件未执行

Click event for JQuery AJAX not executing

html

ajax

jquery

ejs

express