Fatal编程技术网
  • javascript/
  • Javascript 通过ajax发送的表单的html，jquery会自动为其添加endtag，因此现在表单不会'；行不通

Javascript 通过ajax发送的表单的html，jquery会自动为其添加endtag，因此现在表单不会'；行不通

javascript php jquery ajax laravel

Javascript 通过ajax发送的表单的html，jquery会自动为其添加endtag，因此现在表单不会'；行不通,javascript,php,jquery,ajax,laravel,Javascript,Php,Jquery,Ajax,Laravel,我正在数据库中搜索，并将一些产品信息发送回页面。因为数据有很多细节，所以我在服务器端编写了html，并通过ajax调用将其发送回来。唯一的问题是，表中有一个表单。如果我说$（#resulthere）.text（data.htmlres），服务器会正确发送它，但在我的表单后面没有任何权限，但在我更改它的那一刻，$（#resulthere.html（data.htmlres），它会在我的打开表单标记后面添加。所以现在没有一个输入在表单中，因此它不能正常工作 我读到jquery.html检查并添加节点

我正在数据库中搜索，并将一些产品信息发送回页面。因为数据有很多细节，所以我在服务器端编写了html，并通过ajax调用将其发送回来。唯一的问题是，表中有一个表单。如果我说$（#resulthere）.text（data.htmlres），服务器会正确发送它，但在我的表单后面没有任何权限，但在我更改它的那一刻，$（#resulthere.html（data.htmlres），它会在我的打开表单标记后面添加。所以现在没有一个输入在表单中，因此它不能正常工作

我读到jquery.html检查并添加节点本身，因此如果有表单，我们应该改为编写$（#resulthere）[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>';
///直到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>


文件
$（函数（）{
$.ajax({
键入：“获取”，
url:'getdetails.php'，
成功：功能（数据）{
$（“#resulthere”）.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;

在注释中显示代码可能会很有用”//这里还有一些其他输入和行。但即使我删除了它们，就这么简单，它也不起作用”。这可能就是问题所在。我认为这只是让问题充满了不必要的东西。因为正如我所说的，即使我删除了中间的所有内容，我只希望这两个表单标签位于正确的位置，它们不会让你意识到你正在将表单直接放入一个表单中？这可能与您的问题无关，但它肯定不是有效的HTML。此外，您自己在php文件的最后一行终止表单。@DovRine是的，我知道它在tbody中，但我不知道它不是有效的HTML。非常感谢。所以你认为如果我在桌子前面开始表单标签，然后在桌子后面结束它，它会工作吗？不客气。顺便说一句，因为您使用的是laravel，所以只能返回数据并使用模板语言（blaze？）生成表。我想这样做，但表太复杂了，有太多行，只有我知道（甚至我都不完全知道）发生了什么，如果后来有其他开发人员想要更新此代码，那对他们来说将是地狱：）

<!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>



<?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>