我有一个页面A，它将表单参数传递给一个脚本，该脚本将结果的AJAX加载到第A页的div B.这样可行。我想扩展它以在div B中有另一个表单，它将参数传递给另一个脚本，该脚本应该在页面A的div C中对结果进行AJAX加载。我无法使其工作。
问题here是我能找到的最接近的问题，但这似乎是对第二次AJAZ加载的自动调用，而在这里我有一个表格介入。
使用Prototype的工作代码是：
<script type="text/javascript" src="js/prototype.js"></script>
<script>
Ajax.Responders.register({
onCreate: function(){ Element.show('spinner')},
onComplete: function(){Element.hide('spinner')}
});
</script>
<form id="first_form">
<input /> etc etc
<input type="button" onclick="first_box()" value="Call get_first_data.php">
</form>
<script>
function first_box(){
new Ajax.Updater(
'first_div',
'get_first_data.php', {
method: 'post',
parameters: $('first_form').serialize()
});
}
</script>
<div id="first_div">
<p>The output from get_first_data.php appears here.</p>
<img alt="spinner" id="spinner" src="images/ajax-loader.gif" style="display:none;" />
</div>
对于建议的扩展，我想从first.php first_text div中的get_first_data输出调用另一个脚本，并且其输出也显示在first.php中。我已经完成了以下操作（基本上将上面的内容复制到了get_first_data.php的顶部），但是它没有用。
<script type="text/javascript" src="js/prototype.js"></script>
<script>
Ajax.Responders.register({
onCreate: function(){ Element.show('spinner')},
onComplete: function(){Element.hide('spinner')}
});
</script>
<form id="second_form">
<input /> etc etc
<input type="button" onclick="second_box()" value="Call get_second_data.php">
</form>
<script>
function second_box(){
new Ajax.Updater(
'second_div',
'get_second_data.php', {
method: 'post',
parameters: $('second_form').serialize()
});
}
</script>
<div id="second_div">
<p>The get_second_data output should appear here, but doesn't.</p>
<img alt="spinner" id="spinner" src="images/ajax-loader.gif" style="display:none;" />
</div>
... rest of the get_first_data.php output ...
最后，这里的原型代码的JQuery等价是什么？
答案 0 :(得分：0)
我希望我理解你的问题。
你说＆＃34;我想从first.php＆＃34; 中的get_first_data输出调用另一个脚本。你为什么要这样，因为get_first_data内容是按需加载的，例如在任何时候都不会随意使用？无论如何，在由ajax请求加载的页面中定义js / jquery脚本是一个正常的工作流程。下面的代码实现了它。我还添加了一个＆＃34; callSecondBoxButton＆＃34; first.php 中的按钮，它调用ajax加载的 get_first_data.php 页面中定义的 second_box（）函数。因此，可以从 first.php 和 get_first_data.php 中调用 second_box（）函数。
我不熟悉 Prototype 表示，但 jQuery 代码如下所示。
您可能希望对 id 属性使用 camelCase 表示法，并优化错误处理以仅显示用户友好的消息。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Demo - first</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document)
.ready(function () {
$('#spinner').hide();
$('#firstButton').click(function (event) {
first_box();
});
$('#callSecondBoxButton').click(function (event) {
if (typeof second_box === 'function') {
second_box();
} else {
alert('The "second_box" function is not (yet) defined!');
}
});
})
.ajaxStart(function () {
$('#spinner').show();
})
.ajaxStop(function () {
$('#spinner').hide();
});
function first_box() {
$.ajax({
method: 'post',
dataType: 'html',
url: 'get_first_data.php',
data: $('#first_form').serialize(),
success: function (response, textStatus, jqXHR) {
$('#first_div').html(response);
},
error: function (jqXHR, textStatus, errorThrown) {
$('#first_div').html(textStatus + '<br />' + errorThrown);
},
complete: function (jqXHR, textStatus) {
//...
}
});
}
</script>
</head>
<body>
<form id="first_form">
<input type="text" value="abc" />
<input type="button" id="firstButton" value="Call get_first_data.php">
<input type="button" id="callSecondBoxButton" value="Call second_box() from first.php">
</form>
<div id="first_div">
<p>
The output from get_first_data.php appears here.
</p>
<img alt="spinner" id="spinner" src="images/ajax-loader.gif" />
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('#secondButton').click(function (event) {
second_box();
});
});
function second_box() {
$.ajax({
method: 'post',
dataType: 'html',
url: 'get_second_data.php',
data: $('#second_form').serialize(),
success: function (response, textStatus, jqXHR) {
$('#second_div').html(response);
},
error: function (jqXHR, textStatus, errorThrown) {
$('#second_div').html(textStatus + '<br />' + errorThrown);
},
complete: function (jqXHR, textStatus) {
//...
}
});
}
</script>
<hr />
<form id="second_form">
<input type="text" value="def" />
<input type="button" id="secondButton" value="Call get_second_data.php">
</form>
<div id="second_div">
<p>
The output from get_second_data.php should appear here, but it doesn't.
</p>
<img alt="spinner" id="spinner" src="images/ajax-loader.gif" />
</div>
<hr />
<div>
I am the content/data of get_second_data.php.
</div>