AJAX запрос обратного вызова с использованием jQuery

Я новичок в использовании 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 width="800" 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 width="800" 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: это было то, что я делал изначально, и он работает просто отлично. Тем не менее, я заинтересован в том, чтобы хранить все в одном файле, и хотел изучить возможные способы сделать это.

Я уверен, что есть элегантный способ сделать это. Спасибо за любые предложения!

5 ответов

Решение

Элегантный способ будет иметь отдельный (!) PHP-файл, который будет выводить только number times 2 часть вашего текущего PHP. Затем вы генерируете запрос AJAX из вашего текущего PHP в новый отдельный PHP.

Я считаю, что этот пост отвечает одному аспекту того, что вы видите, - отражению всей страницы в вашем окне предупреждения.

Далее, вот несколько хороших сообщений для получения основ AJAX:

Простой пример

Более сложный пример

Заполните раскрывающийся список 2 на основе выбора в раскрывающемся списке 1

Вы могли бы добавить die(); после того, как вы отобразите номер, если вы действительно хотите сохранить его на той же странице. Это прекратит выполнение скрипта. Не забудьте добавить скобки вокруг оператора if:

if (isset($num)) {
  echo $num['number'] * 2;
  die();
}

Это, однако, не самое элегантное решение.

ПРИМЕЧАНИЕ. * Лучший подход - хранить подобные вещи в отдельном файле, чтобы их было легче читать и понимать, особенно если вы используете хорошее преобразование имен.

Это плохой процедурный подход, но я иду:)

<?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();они оба делают одно и то же: прекращают дальнейшее выполнение

Я не знаю, насколько это эффективно, но вы можете сделать что-то вроде:

<?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
 }
?>
Другие вопросы по тегам