如何使用 ajax 从 php 到 html 获取结果？答案

【问题标题】：How to get result from php to html use ajax?如何使用 ajax 从 php 到 html 获取结果？
【发布时间】：2017-01-11 21:42:21
【问题描述】：

更新：我加了“#”后还是不行。

我是 ajax 新手。我正在练习将值发送到 php 脚本，并返回结果。

现在，我遇到了一个问题，我无法在我的 html 页面中显示我的结果。我尝试在线提供答案，但我仍然无法解决此问题。

我的 index.html 从表单中获取值并将表单信息发送到 getResult.php。

我的 getResult.php 将进行计算和回显结果。如何在 index.html 中显示结果？

她的是html代码

index.html

<html>
 <body>
    <form name="simIntCal" id="simIntCal" method="post"
        >
        <p id="Amount" >Amount(USD)</p>
        <input id="amount_value" type="text" name="amount_value">

        <p id="annual_rate" >Annual Rate of Interest
            (%)</p>
        <input id="rate_value" type="text" name="rate_value">

        <p id="time_years" >Time (years)</p>
        <input id="time_value" type="text" name="time">
         <input id="calculate" type="submit" value="Calculate">
    </form>
    <p id="amount_inteCal" >The Amount (Acount
        + Interest) is</p>
    <input id="result" type="text">
</body>
</html>

ajax 脚本：

<script>
      $('#simIntCal').on('submit', function (e) {

            e.preventDefault();

            $.ajax({
                type: 'post',
                url: 'getResult.php',
                data: $('#simIntCal').serialize(),
                success: function (result) {
                    $("#result").text(result);// display result from getResult.php
                    alert('success');
                }
            });

        });
</script>

getResult.php

<?php
if ($_SERVER ["REQUEST_METHOD"] == "POST") {

//do  some calculation 
    $result=10;//set result to 10 for testing
    echo $result;
}
?>

【问题讨论】：

在你的成功回调中应该是$("#result")。
$("#result").val(result);
@ccKep@Ivan Barayev，我加#后还是不行。
浏览器调试工具 (F12) > 网络选项卡显示为请求/响应是什么？
@ccKep 它没有显示任何东西，但它给了我 Uncaught ReferenceError: $ is not defined in console.

标签： php jquery ajax

【解决方案1】：

您的 css 选择器前面缺少“#”作为结果。

$("result").text(result);// display result from cal.php

应该是

$("#result").text(result);// display result from cal.php

【讨论】：

【解决方案2】：

index.php

----php start---------     
    if(isset($_POST['name'])){
        echo 'Thank you, '.$_POST['name']; exit();
    }
----php end  ---------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script>
function test(){
    var formDATA = {'name': $('#input_name').val()}
    $.ajax({
        type: 'POST',
        url: 'index.php',
        data: formDATA,
        success: function(response){
            $('#result').html();
        }
    });
 }
</script>
<input id="input_name" type="text" value="">
<button onclick="test();">Test Ajax</button>
<div id="result"></div>

尝试一些简单的东西，这是一个非常基本的 ajax 和 php 版本，都在一个页面中。由于按钮触发功能，您甚至不需要表单（并不意味着您不应该使用表单）。但我把它简单化了，这样你就可以跟随一切。

抱歉，当我添加 php 打开和关闭标签时，它没有显示为代码。也不要忘记包含您的 jquery 资源。

【讨论】：

【解决方案3】：

在您希望显示结果的 html 文件中，您可能希望使用 div。

当前您的代码正在使用输入字段：

<input id="result" type="text">

你可能想要的是这样的：

<div id="result"></div>

除非您打算将结果显示在表单内的输入字段中，在这种情况下，输入字段实际上并不在表单代码中。

【讨论】：