Question

我正在搜索数据库，并将一些产品信息发送回该页面。因为数据有这么多细节，所以我已经在服务器端编写了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 PAGE就是这样

<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);
}

////直到jquery .html都得到的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">

因此，这无济于事。我希望表单标签位于我放置的位置，而不仅仅是自动结束

Answer 1

这是一个根据您提供的内容精心设计的示例。我使用php dev服务器对其进行了测试。

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>

通过ajax发送的表单的html，jquery会自动为其添加endtag，因此现在表单不起作用

1 个答案: