AJAX 回调不刷新页面

Question

大家好，我在执行 AJAX 回调时遇到问题：

var htmlToInject;
        function Next(step) {
            var options = {
                cache: false,
                type: "POST",
                url: "Page.aspx?Page=" + step,
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "html",
                success: function (result) {                   
                    htmlToInject = result;                  
                },
                error: function (jqXHR, textStatus, errorThrown) {                   
                },
                complete: function (jqXHR, textStatus) {                  
                    $("#form1").empty();
                    $("#form1").append(htmlToInject);                  
                }
            };
            $.ajax(options);
        }

但问题在于我在哪里使用 jQuery 验证方法并且我正在动态创建控件。因此回调不会导致回发，因此不会生成控件，我通过这样做解决了这个问题：

                        $("#form1").empty();
                        $("#form1").append(htmlToInject);      

然后显示新生成的控件。

但字段验证给我错误：“设置”为空。

我查看了页面源代码，之前生成的控件的源代码就在那里。我不想回帖，因为我不想要“加载”效果，因此我使用 ajax。

我该如何解决这个问题？

非常感谢。

Answer 1

如果您使用不显眼的 ajax，您可以在成功/完成函数中酌情执行此操作：

$('#form1').html(htmlToInject);
$.validator.unobtrusive.parse('#form1');

Answer 2

我查看了页面源代码，源代码就在那里 以前生成的控件。

如果您正在谈论右键单击->查看源代码，那么当页面使用常规 POST/GET 加载时，它将显示您最初从服务器获取的 HTML（某些浏览器甚至可能会重复请求服务器以获取它）。如果您想查看 JS/AJAX 所做的更改 - 您需要使用开发人员工具。所有现代浏览器都有。 FireFox 可能需要安装 Firebug。只需按 F12 即可查看这些工具。

但字段验证给我错误：“设置”为空。

更改表单内容后，我没有看到任何验证初始化代码：

complete: function (jqXHR, textStatus) {                  
                    $("#form1").empty();
                    $("#form1").append(htmlToInject);                  
                }

您应该在放置新的表单元素后再次添加$("#form1").validate({...})（或验证插件的初始化方式）。