如何使用 AJAX 在 innerHTML 中调用 PHP 值

Posted 2023-05-07

【中文标题】如何使用 AJAX 在 innerHTML 中调用 PHP 值

【英文标题】：How to call PHP value in innerHTML with AJAX

【发布时间】：2016-08-07 11:12:46

【问题描述】：

我有像this这样的jQuery生成的动态输入字段

我想知道当 innerhtml 输入获得值标签时如何回显 php 变量。

var x2counter = 1;
var x2data_i = 45;

function addExam2(d2p_1)
    var e = document.getElementById("d2p_1");

    e.innerHTML += "<input name='xdata_" + x2data_i + "' placeholder='type in' type='text' value='<?php echo $value;?>'>";
    x2counter++;
    x2data_i++;
;

我知道 AJAX 可以做到这一点。假设我有一个 PHP 文件，例如

value.php

$value = ('abc' === 'abc') ? 'right' : 'false' ;

如何在innerHTML 中调用value.php 使其类似于：

...
 $(wrapper).append('<div><input type="text" name="something" value="<?php echo $value;?>"/>');
...

我是 jQuery 的绝对初学者，所以如果有人可以帮助我，我将不胜感激。

非常感谢。

【问题讨论】：

您的 jQuery 脚本存储在哪里？如果它存储在 .php 文件中，您可以直接回显变量。

嗨，目前它存储在单独的 main.js 文件中。

“我知道 AJAX 可以做到这一点。”..是的，你试过了吗？ ;)

我已经看过了，但是没看懂。

你有ajax调用了吗？如果是这样，我们可以看到它还是如何设置 Ajax 的问题？

【参考方案1】：

使用 jQuery 可以是这样的。还要更新您的 value.php 以返回/回显该值。如果您需要基于所发送内容的特定值，请使用 data 发送。

$(document).ready(function() 
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap");
    var add_button      = $(".add_field_button");
    var x = 1;
    $(add_button).click(function(e) 
        e.preventDefault();
        if(x < max_fields)
            x++;
            $.ajax(
                method: "GET", //or POST whatever you need
                url: "value.php"
                //date: //pass what you want
                ,success: function(value)//If you are successful do 
                                          //this with the value returned.
                    $(wrapper).append("<div><input type='text' name='something' value='"+ value +"' />");
                
                //can do fail too
            );
        
    );
);

还有 $.get 和 $.post 更具体，但会返回到 $.ajax 调用。

【参考方案2】：

使用 AJAX 从您的网络服务器加载变量。有一个文件value.php，它只是将您的值回显到一个空页面。然后，函数getValue()（如下所示）使用XMLHttpRequest 对象从网页中获取该值。然后在您的就绪函数中调用此函数，并将变量的值附加到 HTML 中。

<script>
function getValue() 
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
        if (xhttp.readyState == 4 && xhttp.status == 200) 
            return xhttp.responseText;
        
      ;
    xhttp.open("GET", "http://example.com/path/to/file.php", true);
    xhttp.send();


$(document).ready(function() 
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap");
    var add_button      = $(".add_field_button");
    var x = 1;
    $(add_button).click(function(e) 
        e.preventDefault();
        if(x < max_fields)
            x++;
            $(wrapper).append('<div><input type="text" name="something" value="'+getValue()+'"/>');
        
    );
);
</script>

【参考方案3】：

您将您的 php 文件显示为创建一个独立的值，其中它所做的计算不会从前端接收任何输入，如果这确实是您的用例（有疑问，请参见下文），您可以这样做：

在value.php:

$value = ('abc' === 'abc') ? 'right' : 'false' ;
echo $value;

在你的 jQuery 中：

$.get( "example.php", function(result) 
  alert( result ); // result = $value here
);

---

但是，这样的设置不是很实用，您更有可能需要将一些数据发送到 php 页面以使其处理 $value 在这种情况下，您需要更多类似的东西：

在value.php:

$sentValue = isset($_GET['input']) ? $_GET['input'] : null;
$value = ('abc' === $sentValue ) ? 'right' : 'false' ;
echo $value;

在你的 jQuery 中：

$.get( "example.php", "input":"some value", function(result) 
  alert( result ); // result = $value here
);