从 Ajax 附加的表单元素不起作用-

Question

我在 ajax

中有此表单方法代码

 $.ajax({
    type: "GET",
    url: "/MainPage/GetAllRecords",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
        $.each(data, function (key, value) {
            
            $("#loadNotes").append(
                '<form method="GET">' +
                '<div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">' +

                '<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +
                '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">' + value.description + '</p>' +

                '</div>' +
                '</form>'
               ) ;
        });
    },
    error: function (response) {
        alert(response);
    }
});

我已经尝试将表单方法和其他元素放在 cshtml 文件下，然后它起作用了，它正在调用控制器和视图 但不是来自 ajax。

我错过了什么？请帮忙谢谢

Answer 1

type 属性你传递的 GET 应该是我想的方法。

剩下的代码似乎没问题。您是否检查过浏览器控制台是否有错误？

Answer 2

也许先将 html“表单标签”存储在变量中，然后使用 .html() 将表单附加到#loadNotes

并确保在“#loadNotes”后添加 (document) 以绝对找到文档中的元素。 $("#loadNotes", document)

也成功：功能和错误：功能有点旧。尝试 .done 和 .fail

Ajax 的旧方法。

 $.ajax({
    type: "GET",
    url: "/MainPage/GetAllRecords",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
        var html_forms = '';
        $.each(data, function (key, value) {
                html_forms += '<form method="GET">' +
                '<div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">' +
                '<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +
                '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">' + value.description + '</p>' +
                '</div>' +
                '</form>';
        });

        $("#loadNotes", document).html(html_forms);
    },
    error: function (response) {
        alert(response);
    }
});

Ajax的新方法

 $.ajax({
    type: "GET",
    url: "/MainPage/GetAllRecords",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
}).done(function(data) {
        console.log(data);
        var html_forms = '';
        $.each(data, function (key, value) {
                html_forms += '<form method="GET">' +
                '<div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">' +
                '<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +
                '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">' + value.description + '</p>' +
                '</div>' +
                '</form>';
        });

        $("#loadNotes", document).html(html_forms);
}).fail(function(response) {
       alert(response);
});

编辑：将此部分更改为 < button

由此

'<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>'

对此

'<button class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</button>'

并对此添加操作

html_forms += '<form action="php_controller.php" method="GET">' +

Answer 3

使用反引号``

$("#loadNotes").append(`
    <form method="GET">
        <div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; ">
           <a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="` + value.id + `"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit"> ` + value.title + `</a>
           <p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">` + value.description + `</p>
        </div>
    </form>
`);

Answer 4

这是一个完整的工作演示：

型号：

public class TestModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

查看：

<div id=loadNotes>

</div>
@section Scripts
{
    <script>
        $(function(){
            $.ajax({
                type: "GET",
                url: "/MainPage/GetAllRecords",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    console.log(data);
                    $.each(data, function (key, value) {
            
                        $("#loadNotes").append(
                            '<form method="GET">' +
                            '<div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">' +
                //change here.......    
                            '<a class="stretched-link" href="/MainPage/ShowRecord/' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +
                            '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">' + value.description + '</p>' +

                            '</div>' +
                            '</form>'
                            ) ;
                    });
                },
                error: function (response) {
                    alert(response);
                }
            });
        })
         
    </script>
}

控制器：

public class MainPageController : Controller
{
    public IActionResult GetAllRecords()
    {
        //hard-coded the data for easy testing
        var model = new List<TestModel>()
        {
            new TestModel(){Id=1,Title="aa",Description="des1"},
            new TestModel(){Id=2,Title="bb",Description="des2"},
            new TestModel(){Id=3,Title="cc",Description="des3"}
        };
        return Json(model);
    }
}

注：

标签助手被解释。换句话说，Razor 必须将它们视为实际标签才能替换它们。在这里，它只是一个 JS 字符串，Razor 不会弄乱它。所以不会通过js生成href。

您需要手动设置 href 值。将js改为：

'<a class="stretched-link" href="/MainPage/ShowRecord/' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +

从 Ajax 附加的表单元素不起作用-

Form Element Appended from Ajax not working-

html

javascript

asp.net

ajax

asp.net-core

注：