我正在搜索数据库并将一些产品信息发送回页面。因为数据有很多细节，所以我在服务器端编写了 html 并通过 ajax 调用将其发送回来。唯一的问题是表格里面有一个表格。服务器正确发送它，如果我说 $(#resultshere).text(data.htmlres) 它在我的表单之后没有任何权利，但当我更改它时 $(#resultshere).html(data.htmlres) 它会添加就在我的打开表单标签之后。所以现在所有输入都不是表单，因此它无法正常工作。
我读到 jquery.html 检查并添加节点本身，因此如果有表单，我们应该写 $(#resultshere)[0].innerHTML = data.htmlres 。它不起作用，它仍然立即结束表单。 也有人说在该表单之前和之后添加 pre 但仍然不起作用。
我用 php laravel 发送的代码
$htmlres .='
<thead>
<tr>
<th>row 1</th>
<th>row 2</th>
<th>row 3</th>
<th>row 4</th>
</tr>
</thead>
<tbody>';
//$htmlres .='</pre>';
$htmlres .='<form action="'.route('details').'" method="post" >';
$htmlres .= csrf_field();
//some other inputs and rows are here. but even when i delete them and it's as this simple it doesn't work
$htmlres .='</form>';
//$htmlres .='</pre>';
///HTML页面是这样的
<div id="resultshere">
<div id="loading-img">
<img src="spinner.gif">
</div>
</div>
////AJAX是这样的
$.ajax({
type: "GET",
url: '/getdetails/' + id
success: function (data) {
//$("#resultshere")[0].innerHTML = data.htmlres;
$("#resultshere").html(data.htmlres);
}
///我得到的 HTML 直到 jquery .html 为止
<form action="http://127.0.0.1:8000/gotodetails" method="post" ><input type="hidden" name="_token" value="bvk28w2xooYNuZg2dTBTk1QYipbjGOjW9vviOigR"></form>
///但是当我调用 .html 时我得到了
<form action="http://127.0.0.1:8000/gotodetails" method="post"></form>
<input type="hidden" name="_token" value="bvk28w2xooYNuZg2dTBTk1QYipbjGOjW9vviOigR">
因此，没有任何效果。我希望表单标签位于我放置的位置，而不仅仅是自动结束
最佳答案
这是一个根据您提供的内容设计的可行示例。我使用 php 开发服务器对其进行了测试。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: 'getdetails.php',
success: function (data) {
$("#resultshere").html(data);
}
})
});
</script>
</head>
<body>
<div id="resultshere">
<div id="loading-img">
<img src="spinner.gif" alt="Loading...">
</div>
</div>
</body>
</html>
getdetails.php
<?php
// mock testing functions
function route($route_name){
return 'http://127.0.0.1:8000/gotodetails';
}
function csrf_field(){
return '<input type="hidden" name="_token" value="bvk28w2xooYNuZg2dTBTk1QYipbjGOjW9vviOigR">';
}
// end mock testing functions
$action = route('details');
$csrf = csrf_field();
$htmlres = <<<HTML
<table>
<thead>
<tr>
<th>row 1</th>
<th>row 2</th>
<th>row 3</th>
<th>row 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form action="{$action}" method="post" >
{$csrf}
</form>
</td>
</tr>
</tbody>
</table>
HTML;
echo $htmlres;
加载后生成以下最终文档:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: 'getdetails.php',
success: function (data) {
console.log(data);
$("#resultshere").html(data);
}
})
});
</script>
</head>
<body>
<div id="resultshere">
<table>
<thead>
<tr>
<th>row 1</th>
<th>row 2</th>
<th>row 3</th>
<th>row 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form action="http://127.0.0.1:8000/gotodetails" method="post">
<input type="hidden" name="_token" value="bvk28w2xooYNuZg2dTBTk1QYipbjGOjW9vviOigR">
</form>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
关于javascript - 通过ajax发送的表单的html，jquery自动为其添加结束标记，所以现在表单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56915349/