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

Question

我有 jQuery 生成的动态输入字段，例如 this

我想知道如何在 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 的初学者，所以如果有人可以帮助我，我将不胜感激。

非常感谢。

Answer 1

使用 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>

Answer 2

你将你的 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
});

Answer 3

使用jQuery可以这样。同时将您的 value.php 更新为 return/echo 的值。如果您需要基于发送的内容的特定值，请使用 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 调用。

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

How to call PHP value in innerHTML with AJAX

javascript

php

ajax

jquery

innerhtml