如何将AJAX响应注入HTML页面？ [英] How to inject an AJAX response into an HTML page?
问题描述
我试图在发出AJAX请求时调用一个函数。这是我的代码：
< script type =text / javascriptsrc =http：// ajax。 googleapis.com/ajax/libs/jquery/1.3.2/jquery.js\"></script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'。NextPage'）。click（function（）{
$ .ajax（{
url：'test .php'，
data：{x：1}，
类型：'POST'，
dataType：'JSON'，
成功：函数（响应）{
//不希望在这里发出任何提醒或通知
}
}）;
}）;
}）;
< / script>
< / head>
< body>
< button type =buttonclass =NextPage>转到下一页< / button>
<？php
if（isset（$ _ POST ['x']））{
if（$ _POST ['x'] == 1）{
function1（）;
函数function1（）{
//这是我尝试在这个函数中做的一个样本
global $ resultNUM;
global $ recordsPerPage;
global $ var;
global $ i;
全球$ searchid;
if（$ resultNUM> $ recordsPerPage * i）{
$ nexturl =something;
$ firstloop = false;
getdata（$ nexturl，$ var，$ firstloop）;
$ i ++;
} else {
echo结果结束;
}
}
？>
< / body>
我只需要 function1 哪个getdata函数被调用），并且响应被注入到按钮下面。
另一个答案是，你的大部分代码正在工作。您的AJAX请求在客户端进行，由服务器接收，并且响应返回到浏览器。因此，您需要一种将文本或HTML响应注入页面的方法。
不能以标准方式写入页面，因为它已经被渲染。但是，JavaScript允许您访问文档对象模型（简称DOM），它允许您以编程方式修改屏幕上的元素。
在你的按钮之后添加一个新的部分，因此：
< button type =buttonclass =NextPage> ;转到下一页< / button>
< div id =result>< / div>
现在在您的成功处理程序中，将响应注入页面。这个jQuery代码假设结果只是文本：
success：function（response）{
$（'＃result ）的.text（响应）;如果它包含HTML标签，请使用 html（），如果它包含HTML标签，则使用 而不是 text（）。
那么这里发生了什么？我们使用＃前缀选择了 id 中的一个元素，并且 $（）构造为这个jQuery元素对象创建（只要它存在 - 我们知道它的确如此）。这使我们可以访问该手册中记录的该类方法。
I am trying to call a function when an AJAX request is made. This is my code so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.NextPage').click(function() {
$.ajax({
url: 'test.php',
data: {x: 1},
type: 'POST',
dataType: 'JSON',
success: function(response) {
// do not want any alerts or notifications here
}
});
});
});
</script>
</head>
<body>
<button type="button" class="NextPage">go to nextpage</button>
<?php
if (isset($_POST['x'])) {
if ($_POST['x'] == 1) {
function1();
}
}
function function1() {
// this is a sample of what im trying to do in this function
global $resultNUM;
global $recordsPerPage;
global $var;
global $i;
global $searchid;
if ($resultNUM > $recordsPerPage * i) {
$nexturl = "something";
$firstloop=false;
getdata($nexturl, $var,$firstloop);
$i++;
} else {
echo "end of results";
}
}
?>
</body>
I just need function1 be executed (in which getdata function is called), and for a response to be injected below the button.
解决方案 It seems from the comment thread on the other answer, most of your code is working. Your AJAX request is made on the client side, it is received by the server, and the response comes back to the browser. You just therefore need a way to inject the text or HTML response back into the page.
You cannot write to the page in the standard way, since it has already been rendered. However, JavaScript gives you access to the "Document Object Model" (or DOM for short) that allows you to modify the elements on the screen programmatically.
To see this in action, add a new section after your button, thus:
<button type="button" class="NextPage">go to nextpage</button>
<div id="result"></div>
Now in your success handler, inject the response back into the page. This jQuery code assumes the result is just text:
success: function(response) {
$('#result').text(response);
}
If it contains HTML tags, use html() instead of text().
So what is happening here? We have selected an element by id using the # prefix, and the $() construct creates for that a jQuery Element object (as long as it exists - and we know it does). This gives us access to the methods on that class that are documented in the manual.
这篇关于如何将AJAX响应注入HTML页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
