Ajax 无法从文件中加载 html答案

【问题标题】：Ajax can't load html from fileAjax 无法从文件中加载 html
【发布时间】：2012-10-07 07:52:45
【问题描述】：

在我的一个项目中，每次提交表单时，我都需要在元素内显示新的 html 代码。所以我为此使用了 Ajax，但它似乎并没有完成这项工作——它只会阻止表单提交，但不会显示 html 文件的内部（在我的例子中是 output.html）。你能帮我弄清楚我做错了什么吗？

这是 index.html 的代码

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
<body>
<form id="cliform" onsubmit="return false;" action="" method="get">
<div class="cl">>   <input type="text" class="cli" name="cmd" autocomplete='off' value=""     autofocus /></div>
</form>

<script type="text/javascript">
var frm = $('#cliform');
frm.submit(function () {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            $('#output').load('output.html #content');
        }
    });

    return false;
});
</script>
<div id="output"></div>
</body>
</html>

这是 output.html

<div id="content">
<h1> Hi </h1>
<p>Hello, World!</p>
</div>

【问题讨论】：

嗯，首先是 URL。 url: frm.attr('action')。好的，现在让我们看看属性action。哦。它是空的。

标签： jquery html ajax forms load

【解决方案1】：

.load 自己执行 ajax 请求，所以现在您在另一个 ajax 请求的成功处理程序中执行 ajax 请求。首先调用的“外部”请求尝试加载表单的 action 属性中的 url，该属性为空。所以这个请求可能行不通。如果该请求失败，则根本不会执行“内部”请求。

我不知道否决票，但这可能是因为作为 Web 开发人员，甚至是初学者，您应该能够通过检查浏览器的脚本和网络日志（Chrome of FireFox 与FireBug) 提供。

【讨论】：