使用動態生成的 JSON 的 AJAX 帖子未觸發到后端
[英]AJAX post that uses dynamically-generated JSON is not firing to the backend
問題描述
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">×</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)
在服務器端，我也沒有看到收到任何請求。 I noticed that, in my IDE, when I hover over the [configName] JSON section of the AJAX post, I see the following error:
"當前 JavaScript 版本不支持計算屬性名稱"
所以我嘗試將其更改為：
$.post(
url,
{ configName: newVal },
alert("update made")
)
但問題仍然存在。 誰能發現我哪里出錯了？
3 個解決方案
解決方案1
2 2020-07-27 13:46:22
抱歉，我無法在 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
解決方案2
0 2020-07-29 21:51:43
我想 modal.find 在這里沒有達到目的。 我找不到 modal 的 function 來讀取值，所以我使用了 jquery.val() function。
var newVal = $('#new-value').val();
希望這對你有用
<: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">×:</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 = $('#new-value').val(), console:log(newVal) $,post( url; { [configName]: newVal }, alert("update made") ) }); </script> </body> </html>
解決方案3
0 2020-08-05 14:40:45
真正需要修復的是提交更改時的選擇器
var button = $(event.relatedTarget);
至
var element = $('input#current-value');
和改變
var configName = button.data('config');
var newVal = modal.find('#new-value').text;
至
var configName = element.val();
var newVal = $('textarea#new-value').val();
所以最后這就是你的代碼應該是什么樣子，它應該被修復
<: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">×:</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 element = $('input#current-value'). var modal = $(this); var url = '/fizzes/abc123/buzzes/abc235'. var configName = element;val(). var newVal = $('textarea#new-value');val(). console:log(newVal), $:ajax({ url, url: method: 'POST', data: { [configName]. newVal }; success, (data) => { console:info(data). }; error, (err) => { console;error(err); }, }); }); </script> </body> </html>
順便說一句，您絕對可以忽略我使用的是 $.ajax 而不是您使用的帖子這一事實，這對我來說只是一個健全的檢查。
如何找到動態生成的HTML元素？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.