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

标签 javascript php html 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(

关于javascript - 将变量发布到 php 文件并使用 ajax 在同一页面上加载结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29785101/

相关文章:

JavaScript onmouseover 和 onmouseout 事件导致闪烁

javascript - 我怎样才能用我的正则表达式捕获一个可选的星号?

php - Dreamweaver、PHP、MySQL

php - PHP文件上传 : Validating that a file is gpx

jQuery - 如何制作包含多张幻灯片的单个 html 页面 - 并且一次只能看到一张

javascript - 导航下拉菜单未出现在 HTML 选择选项下拉菜单上方

javascript - 无需双 com 将第一个数组的元素复制到第二个数组

php - 包装器在服务器配置中被 allow_url_include=0 禁用

php - 使用 jQuery ajax 创建数据库表时遇到问题

html - 在具有背景图像的 Div 中垂直居中图像? (没有任何工作)