在 jquery 中发布数据时如何使用 jquery UI 使 post.php 弹出消息

Posted 2023-05-08

【中文标题】在 jquery 中发布数据时如何使用 jquery UI 使 post.php 弹出消息

【英文标题】：How to make post.php to popup message using jquery UI when post data in jquery

【发布时间】：2020-05-16 07:34:49

【问题描述】：

我使用jQuery提交表单，调用another.php，然后我使用jQuery-UI弹出消息，但没有显示。

如果没有发布，如果我将参数作为变量提供，它将显示弹出消息。

这是 jQuery：

<script>
$(document).ready(function() 
  $("#divhide").hide();
  $('#info').submit(function() 
    $.post('another.php',$('#info').serialize(), function() 
      location.reload(true);
    );
  return false;
);
</script>

这是another.php中的代码：

<link rel="stylesheet" href="assets/jquery-ui.css">
<script src="assets/jquery.min.js"></script>
<script src="assets/jquery-ui.js"></script>
<script>
$(function() 
  $("#dialog").dialog(
     width: 200,
     hide: 'slide',
     position: 'top',
     show: 'slide',
     close: function(event, ui) 
       window.location.href = history.back();
    
  );
);
</script>
<div id="dialog" title="Error">
  <p><?php echo "Error : Already  X has the value $X"; ?></p>
</div>

【问题讨论】：

不要从 AJAX 请求返回 html/JS。而是以序列化格式（例如 JSON 或 XML）返回实际数据，并在 $.ajax() 调用的承诺中使用这些数据

我在另一个 PHP 文件中的 another.php 中的代码中看不到任何价值。如果您想使其可重用，请将其内容放入 javascript 文件中，并将其包装在一个函数中（在您询问之前，您可以使用 JS 添加/删除 @987654328 @ 来自 DOM），将其包含在您的主页中，然后在您想要显示对话框时调用该函数。 AJAX 对于显示弹出窗口的任务来说是完全错误的工具。如果 another.php 实际上也处理表单数据，请保留它，但将显示弹出窗口的任务移至 AJAX 调用的“成功”。

这能回答你的问题吗？ Executing Javascript in Ajax-called page

查看我的这个答案***.com/a/59918008/12232340

您应该从您的帖子请求中返回数据，并在success 上打开对话框。在fail 上做其他事情。这是合乎逻辑的做法。

【参考方案1】：

AJAX 的好处是您可以通过 HTTP 向服务器发送数据或从服务器获取数据，而无需重新加载整个页面。

例如，如果您使用以下命令将数据发布到 PHP 脚本：

$(function() 
  $("#divhide").hide();
  $('#info').submit(function() 
    $.post('another.php', $(this).serialize(), function(data) 
      $("#divhide").html(data).show();
    );
  return false;
);

您的脚本会将数据发布到 PHP 并得到一些结果，作为 data 变量返回。 JavaScript 可以返回很多数据类型，例如文本、HTML、JSON 和 XML。因此，如果您期望返回 HTML，您只需将其附加到对象即可。

例如，如果another.php 有以下代码：

<div id="dialog" title="Error">
  <p><?php echo "Error : Already X has the value $X"; ?></p>
</div>

然后这将在data 中返回并使用.html() 我们可以将其附加到元素。