Question

在我的一个项目中，我需要在每次提交表单时在元素内显示新的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>

Answer 1

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

我不知道downvote，但这可能是因为作为一个web开发者，即使是初学者，你应该能够通过检查浏览器的脚本和网络日志来识别这样的问题（Chrome of FireFox with FireBug）提供。

Ajax无法从文件加载html

1 个答案: