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

How to call PHP value in innerHTML with AJAX

本文关键字：调用 PHP innerHTML 何使用 AJAX      更新时间：2024-07-07

我动态输入了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可以是这样的。同时更新您的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调用。

使用AJAX从web服务器加载变量。有一个文件value.php，它只是将您的值回显到一个空页面。然后，函数getValue()，如下所示，使用XMLHttpRequest对象，将从网页中获取该值。然后在ready函数中调用此函数，并在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>

您将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
});
相关文章：