Question

我尝试了很多但似乎无法做任何事情。

我正在尝试创建一个将信息发送到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 时看到的那样。

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

Answer 1

您的点击事件不会停止对服务器的页面请求的实际交易。为此，只需添加＆＃34;返回false;＆＃34;到点击功能结束时：

$('#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(

Answer 2

感谢大家的帮助，我现在就开始工作了。

我做错了一些事情：

我在我的php文件中使用单引号作为URL以及$ _POST [＆＃39;＆＃39;]变量。
我需要添加return false;正如史蒂夫指出的那样。
我没有＆＃34;名称＆＃34;对于输入元素，只有一个ID。

Answer 3

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

/* ... */

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

/* ... */

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

3 个答案: