html формы, отправленной через ajax, jquery автоматически добавляет endtag для него, так что теперь форма не работает - PullRequest
Новая
       1

html формы, отправленной через ajax, jquery автоматически добавляет endtag для него, так что теперь форма не работает

0 голосов
/ 06 июля 2019

Я ищу в базе данных и высылаю информацию о продуктах на страницу. Поскольку в данных так много деталей, я написал html на стороне сервера и отправил его обратно с помощью ajax-вызова. Единственная проблема заключается в том, что внутри таблицы есть форма. сервер отправляет его правильно, если я скажу $ (# resultshere) .text (data.htmlres), то он не имеет никакого права после моей формы, но в тот момент, когда я изменяю его, $ (# resultshere) .html (data.htmlres) добавляет сразу после моего открытия тега формы. так что теперь ни один из входов не находится в форме, поэтому он не работает должным образом.

Я прочитал, что jquery.html сам проверяет и добавляет узлы, поэтому, если есть форма, мы должны вместо этого написать $ (# resultshere) [0] .innerHTML = data.htmlres. он не работает, он все равно завершает форму. также кто-то сказал добавить до и после этой формы, но все равно не работает.

код, который я посылаю с php laravel 

<code>$htmlres .='      
<thead>               
 <tr>
<th>row 1</th>                    
<th>row 2</th>                    
<th>row 3</th>                    
<th>row 4</th>                                         
</tr>               
</thead>                
<tbody>';                
//$htmlres .='
'; $ htmlres. = ''; $ htmlres. = csrf_field (); // некоторые другие входы и строки здесь. но даже когда я удаляю их, и это так просто, это не работает $ htmlres. = ''; // $ htmlres. = '';

/// HTML PAGE похож на это 

<div  id="resultshere">              
<div id="loading-img">
<img src="spinner.gif">                
</div>        
</div>

//// AJAX IS вот так 

 $.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">

так что из-за этого ничего не работает. Я ожидаю, что тег формы будет в том месте, которое я поместил, а не просто автоматически завершится

1 Ответ

1 голос
/ 08 июля 2019

Вот надуманный, рабочий пример, основанный на том, что вы предоставили. Я протестировал его с помощью сервера 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...