0

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

1 回答 1

0

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

我不知道否决票，但这可能是因为作为 Web 开发人员，甚至是初学者，您应该能够通过检查您的浏览器（带有 FireBug 的 FireFox 的 Chrome）提供的脚本和网络日志来识别此类问题.

于 2012-10-07T08:34:37.843 回答