将变量发布到 php 文件并使用 ajax 在同一页面上加载结果

我已经尝试了很多搜索，但似乎无法使任何工作。

我正在尝试制作一个将信息发送到 PHP 文件并在同一页面上显示 PHP 文件的输出的表单。

到目前为止，我拥有的：

.HTML：

    <html>
      <form id="form">
        <input id="info" type="text" />
        <input id="submit" type="submit" value="Check" />
      </form>
      <div id="result"></div>
    </html>

.JS：

<script type="text/javascript">
var info= $('#info').val();
var dataString = "info="+info;
$('#submit').click(function (){
     $.ajax({
        type: "POST",
        url: "/api.php",
        data: dataString,
        success: function(res) {
            $('#result').html(res);
                }
  });
});
</script>

.PHP：

<?php
  $url = '/api.php?&info='.$_POST['info']; 
  $reply = file_get_contents($url); 
   echo $reply;
?>

当我将表单操作设置为 api.php 时，我得到了我正在寻找的结果。基本上，我想要的是 "result"div 中看到与加载 api.php 时相同的内容。

我无法获得任何有效的解决方案。

您的点击事件不会停止对服务器的页面请求的实际事务。为此，只需在点击函数的末尾添加"return false;"：

$('#submit').click(function (){
 $.ajax({
    type: "POST",
    url: "/api.php",
    data: dataString,
    success: function(res) {
        $('#result').html(res);
    }
 });
 return false;
});

此外，应将提交按钮中的type="submit"更新为type="button"或（但不是两者）将.click(更改为.submit(

谢谢大家的帮助，我现在让它工作了。

我做错了几件事：

我在 php 文件中对 URL 和 $_POST[''] 变量使用单引号。
我需要添加返回假;正如史蒂夫指出的那样。
我没有输入元素的"名称"，只有一个 ID。

我认为您的代码在填充任何内容之前会评估dataString。尝试将其置于$.ajax的功能中。下面的代码。

/* ... */
$('#submit').click(function (){
    $.ajax({
        var info= $('#info').val();
        var dataString = "info="+info;
/* ... */

相关内容

最新更新

热门标签：