时间戳

首页 > 解决方案 > 使用动态生成的 JSON 的 AJAX 帖子未触发到后端

javascript - 使用动态生成的 JSON 的 AJAX 帖子未触发到后端

问题描述

Bootstrap 和 FE 开发的新手。我有以下页面向用户显示一个表格，表格中的每一行都有一个“更改”按钮，如下所示：

在此处输入图像描述

当用户单击更改按钮时，他们会看到如下模式：

在此处输入图像描述

然后他们可以更改配置的值并单击更新按钮，我希望 AJAX 帖子在此处将一些 JSON 提交到某个 url。

这是我最好的尝试：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <meta name="description" content="">
    <meta name="author" content="">

    <title>My App</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
        <a class="navbar-brand" href="/">My App</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/fizzes">Fizzes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/buzzes">Buzzes</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">

    <div class="row">
        <div class="col-md-4 mt-5">
            <h3><span>Configurations</span></h3>
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">Config</th>
                    <th scope="col">Value</th>
                    <th scope="col">Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td >type</td>
                    <td >EXCEL</td>
                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#changeModal" data-currval="EXCEL" data-config="type">Change</button></td>
                </tr>
                <tr>
                    <td >fizz</td>
                    <td >1</td>
                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#changeModal" data-currval="1" data-config="fizz">Change</button></td>
                </tr>
                </tbody>
            </table>
            <button>Config History</button>
        </div>
    </div>

</div>

<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="changeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changeModalLabel">Change config value</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="current-value" class="col-form-label">Current value:</label>
                        <input type="text" class="form-control" id="current-value"/>
                    </div>
                    <div class="form-group">
                        <label for="new-value" class="col-form-label">New value:</label>
                        <textarea class="form-control" id="new-value"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" id="btnUpdate" class="btn btn-primary">Update</button>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
    $('#changeModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var configName = button.data('config');
        var currVal = button.data('currval');
        var modal = $(this);
        modal.find('.modal-title').text('Change value for ' + configName);
        modal.find('.modal-body input').val(currVal);
    });

    $('#btnUpdate').click(function (event) {
        var button = $(event.relatedTarget);
        var modal = $(this);
        var url = '/fizzes/abc123/buzzes/abc235';
        var configName = button.data('config');
        var newVal = modal.find('#new-value').text;

        $.post(
            url,
            { [configName]: newVal },
            alert("update made")
        )
    });
</script>

</body>
</html>

当我在浏览器中运行它时，单击“更改”，更新一个值并单击“更新”，我得到了alert("update made")弹出窗口，但在我的开发者工具网络选项卡中，我实际上并没有看到 AJAX POST 触发，而是我看到以下错误：

Uncaught TypeError: Cannot read property 'length' of undefined
    at $ (jquery.min.js:2)
    at text (jquery.min.js:2)
    at i (jquery.min.js:2)
    at Dt (jquery.min.js:2)
    at Function.S.param (jquery.min.js:2)
    at Function.ajax (jquery.min.js:2)
    at Function.S.<computed> [as post] (jquery.min.js:2)
    at HTMLButtonElement.<anonymous> (abc235:121)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.v.handle (jquery.min.js:2)

在服务器端，我也没有看到收到任何请求。我注意到，在我的 IDE 中，当我将鼠标悬停在[configName]AJAX 帖子的 JSON 部分时，我看到以下错误：

“当前 JavaScript 版本不支持计算属性名称”

所以我尝试将其更改为：

$.post(
    url,
    { configName: newVal },
    alert("update made")
)

但问题仍然存在。谁能发现我哪里出错了？

标签： javascriptjqueryajaxtwitter-bootstrap

解决方案

抱歉，我无法在 jQuery 中执行此操作，但这里有一个 AJAX 请求，它应该替换底部的整个 POST 请求：

function sendData(url, object) {
  const formdata = new FormData();
  for ( let key in object ) {
    formdata.append(key, object[key]);
  }
  
  const http = new XMLHttpRequest();
  return new Promise(resolve => {
    http.onreadystatechange = function () {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      }
    };
    http.open("POST", url, true);
    http.send(formdata);
  });
}

//object is post information

sendData(url, {
  [configName]: newVal
}).then(response => alert("Update made"));

//configName should be a string

推荐阅读