使用 jQuery 的 AJAX 请求回调
Posted
技术标签:
【中文标题】使用 jQuery 的 AJAX 请求回调【英文标题】：AJAX request callback using jQuery 【发布时间】：2013-08-01 03:44:36 【问题描述】：我是使用 jQuery 处理 AJAX 的新手，并且已经编写了一个基本脚本来了解基础知识。目前我正在向同一个文件发布一个 AJAX 请求，我希望根据该 AJAX 调用的结果进行一些额外的处理。
这是我的代码：
**/*convertNum.php*/**
$num = $_POST['json'];
if (isset($num))
echo $num['number'] * 2;
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
td border:none;
</style>
</head>
<body>
<table border="1">
<tr>
<td align="center">Number To Send<br /><input type="text" id="numSend" size="40%" style="border:2px solid black;"></td>
<td align="center">Number Returned<br /><input type="text" id="numReturn" size="40%" readonly></td>
</tr>
<tr><td align="center" colspan="4"><input type="button" value="Get Number" id="getNum" /></td></tr>
</table>
<script>
$(document).ready(function ()
$('#getNum').click(function ()
var $numSent = $('#numSend').val();
var json = "number":$numSent;
$.post("convertNum.php", "json": json).done(function (data)
alert(data);
);
);
);
</script>
</body>
</html>
这是我提交数字“2”时得到的回复：
4
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
td border:none;
</style>
</head>
<body>
<table border="1">
<tr>
<td align="center">Number To Send<br /><input type="text" id="numSend" size="40%" style="border:2px solid black;"></td>
<td align="center">Number Returned<br /><input type="text" id="numReturn" size="40%" readonly></td>
</tr>
<tr><td align="center" colspan="4"><input type="button" value="Get Number" id="getNum" /></td></tr>
</table>
<script>
$(document).ready(function ()
$('#getNum').click(function ()
var $numSent = $('#numSend').val();
var json = "number":$numSent;
$.post("convertNum.php", "json": json).done(function (data)
alert(data);
);
);
);
</script>
</body>
</html>
显然我只对接收和使用数字“4”感兴趣，因此我的问题是：准确指定我想要返回的数据的最佳方法是什么？
我的一些想法：
将我所有的 HTML 包装在一个 if 语句中（即，如果 $num isset，则不输出 html；否则输出 HTML），但我正在回显 HTML，我宁愿不这样做。 设置一个单独的 PHP 脚本来接收我的 AJAX 调用：这就是我最初所做的，它工作得很好。不过，我有兴趣将所有内容都保存在一个文件中，并想探索可行的方法。我确信有一种优雅的方法可以做到这一点。感谢您的任何建议！
【问题讨论】：
为什么要将所有内容保存在一个文件中。你应该结构化你的代码。否则，您将获得包含混乱代码的非常大的文件。那么css和javascript呢？您也想将所有内容都放在一个文件中吗？你可以做到，但我认为这不会很优雅。 史蒂文 - 很公平。我想探索将所有调用保存在一个文件中的原因是因为我正在处理一个项目，我们将有多个 php 页面进行 AJAX 调用，并且我正在尝试确定处理这种情况的最佳实践。现在，我会说每个像这样使用 AJAX 调用的脚本都会有一个对应的 .inc 包含文件——也许最好对那个包含文件进行 POST 调用，而不是使用相同的页面或不同的脚本。我现在正处于开发的探索阶段，我得到的答案非常有帮助。 【参考方案1】：我相信this post 回答了您所看到的一个方面 - 整个页面在您的警报框中的回声。
接下来，这里有一些了解 AJAX 基础的好帖子：
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
【讨论】：
非常感谢。有额外的阅读材料和例子总是好的。感谢您的宝贵时间。【参考方案2】：注意 *更好的方法是将此类内容保存在单独的文件中，使其更易于阅读和理解，尤其是在您使用良好的命名转换时。
这是一种糟糕的程序方法，但我走了:)：
<?php
$num = $_POST['json'];
if (isset($num))
echo ($num['number'] * 2);
die();
?>
或者更好：
<?php
$num = $_POST['json'];
if (isset($num))
die($num['number'] * 2); //In case of error you could put them in brackets
?>
PS
作为die(); 的替代方案，您可以使用exit();，它们的作用几乎相同：终止进一步执行
【讨论】：
第一种方法中的括号？ +1 第二个 感谢输入错误:) 没看到 谢谢鬼人。那是我最初的方法 - 我已经对我的问题进行了编辑以指定这一点。它工作得很好，但我想探索使用同一页面接收 AJAX 调用的想法。看起来这仍然可能是最有效的方法。谢谢！【参考方案3】：我不知道这有多有效，但您可以执行以下操作：
<?php
/*convertNum.php*/
$num = isset($_POST['json']) ? $_POST['json'] : NULL; //you have errors in this line
if (!is_null($num))
echo $num['number'] * 2;
exit(); //exit from script
?>
【讨论】：
【参考方案4】：如果您确实想将其保留在同一页面上，可以在回显该号码后添加die();。这将终止脚本的执行。不要忘记在 if 语句周围添加括号：
if (isset($num))
echo $num['number'] * 2;
die();
然而，这不是最优雅的解决方案。
【讨论】：
【参考方案5】：优雅的方法是拥有一个单独的（！）PHP 文件，它只会输出您当前 PHP 的 number times 2 部分。然后生成一个从当前 PHP 到新的单独 PHP 的 AJAX 请求。
【讨论】：
嗨 devnull，这是我最初的方法。我需要编辑我的答案以包括在内 - 谢谢。我确实有 AJAX 调用指向一个单独的 PHP 脚本，但我想探索将其全部保存在一个页面上的想法。 那么你应该去if ...你不需要回显HTML，你仍然可以在部分之外拥有HTML部分。这也适用于 PHP if 语句！
有趣 - 我没有考虑过。让我再玩一下我的脚本并探索一下。谢谢-我想保持开放状态以考虑其他想法，但是如果这是最佳解决方案，我会将其标记为答案。感谢您的意见。
经过进一步测试，我决定使用包含文件来处理调用，或者使用 if 语句是最好的方法，并且强烈倾向于包含文件。谢谢大家。以上是关于使用 jQuery 的 AJAX 请求回调的主要内容，如果未能解决你的问题，请参考以下文章