PHP 和 AJAX 获取变量答案

【问题标题】：PHP and AJAX to get a variable backPHP 和 AJAX 获取变量
【发布时间】：2019-11-16 13:50:37
【问题描述】：

我正在使用 PHP 和 AJAX 在页面中发布帖子。 Request.php 请求第二个 return.php。但我没有得到回报：

request.php

<script src="jquery-3.3.1.min.js"></script>
</head>

<script type="text/javascript">  
   function getnumber(){  
    var number=document.getElementById("number").value;  
    alert(number);  
    }

    function post(){
     var numberp=document.getElementById("number").value;  
     $.post('return.php',{postnumber:numberp}, 
     function(data){ 
     var result = $('#numberp').html(data); 
     return result; });
    }
</script>

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>  
    <input type="button" value="Get number" onclick="getnumber()"/>  
</form> 

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>  
    <input type="button" value="Get number processed" onclick="post()"/>  
</form>

return.php

<?php
function returnString() {
$post_number = $_POST['postnumber'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

预期结果是return.php返回的数字

【问题讨论】：

您是否检查了浏览器控制台以查看您的jQuery 帖子是否按预期执行，或者是否检查了浏览器控制台是否有错误？
是的，这很奇怪，它没有显示任何内容。
您的 js 和表单 html 在 php 文件中的任何原因？
@VladimirMujakovic 将javascript 与php 放在同一页面上有什么问题？这不是我将如何构建事物的方式，但我也看不出这会如何导致与您的评论相关的任何问题......
没问题，我只是想测试一下。

标签： javascript php ajax dynamic

【解决方案1】：

第一件事是 id 应该是唯一的。您在两个地方使用了一个 id= number，这会产生歧义。检查此工作代码。

request.php

<script type="text/javascript">
   function getnumber(){
    var number1=document.getElementById("number1").value;
    alert(number1);
    }


    function post(){
     var number2=document.getElementById("number2").value;
     $.post('return.php',{postnumber:number2},
     function(data){
     var result = $('#numberp').html(data);
     console
     return result; });
    }
</script>

<form>A
    Enter No:<input type="text" id="number1" name="number1"/><br/>
    <input type="button" value="Get number" onclick="getnumber()"/>
</form>

<form>
    Enter No:<input type="text" id="number2" name="number2"/><br/>
    <input type="button" value="Get number processed" onclick="post()"/>
</form>
<div id="numberp"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

return.php

<?php

function returnString() {
    $post_number = $_POST['postnumber'];
    echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

【讨论】：

那些输入字段在单独的表单中，只要他在处理提交时选择正确的表单就可以这样做 - 但否则，是的，在真实环境中，您可能想要更精确。
是的，这是单独的形式，但最终你会通过 id 获得价值。所以它肯定会产生歧义
我的错，我在查看 name 属性，没有注意到 id 也被命名为 number。你是 100% 正确的。 ID 应该始终是唯一的。
@CodeBreaker 因为我只是通过更改 ID 来评论 Gaurav 的建议是行不通的。我以前试过。只是你提到的小细节是添加
没有这个它不会工作。谢谢！我不明白为什么？为什么我们在这里需要
以及为什么只用于第二个（ajax）元素？

【解决方案2】：

我已修改您的代码以使用sumbit() 来捕获表单数据。这样，我们可以序列化数据并将其发送到您的表单处理器（请注意，serialize() 将序列化您表单中的所有输入字段，然后由您的表单处理程序来提取正确的值。

在 return.php 中，我修改了您的 $_POST 变量以反映输入字段 name 属性值。 name 属性是 php 知道如何查找表单值（我知道）。最后，我将您的输入类型更改为submit，并在submit() 处理程序中使用e.preventDefault() 来防止默认行为并使用AJAX。

将type="submit" 用于提交按钮在语义上更正确。

另外，不需要在表单元素中使用onclick="" 属性，将 JS 与 HTML 分开并处理提交会更简洁一些。

以下代码适用于我的机器。

request.php

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>


<form >
    Enter No:<input type="text" id="number" name="number"/><br/>
    <input type="button" value="Get number" onclick="getnumber()"/>
</form>

<form id="postForm">
    Enter No:<input type="text" id="number" name="number"/><br/>
    <input  type="submit" value="Get number processed" />
</form>

<div id="numberp"></div>

<script type="text/javascript">

    function getnumber(){
        var number=document.getElementById("number").value;
        alert(number);
    }

    $('#postForm').submit(function(e) {
        e.preventDefault()
        // $(this) refers to the form in this context
        var data = $(this).serialize()
        $.ajax({
            type: 'POST',
            url: './return.php',
            data: data,
            success: function(res) {
                $('#numberp').html(res);
            }
        });
    })

</script>
</body>
</html>

return.php

<?php
function returnString() {
$post_number = $_POST['number'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();

【讨论】：

这就像一个魅力，它确实更清晰易读。谢谢！我只是不明白为什么表单不够用，我们需要
您唯一需要的 div 是输出 div，它在您的代码中。您在成功函数中定位#numberp，因此需要存在于文档中的某个位置。它不必是 Id 或 div，但您的示例以它为目标
这正是我的意思。在我的原始代码（见上文）中，我在我的 post() 中返回“numberp”，但我没有在我的请求表单中明确它。我忘记了输出
这就是诀窍。无论如何，序列化整个表单的解决方案也是一个很好的解决方案。感谢您的宝贵时间:)