Ajax多次添加输入 - Ajax add input more than once

Ajax add input more than once

本文关键字：输入添加 Ajax | 更新日期: 2023-09-27

我已经成功地编写了一个可工作的Ajax代码，但问题是我只能添加一次输入字段。我有一个提交输入，它调用Ajax脚本，一切正常，输入文本字段出现，但在此之后，如果我想通过单击提交输入添加另一个文本字段，它就不起作用了。您只加载一次（YOLO）。如何编写更棒的代码，让我根据需要添加尽可能多的文本字段？感谢您的回复。这是我的代码：

index.php:

<head>
<script>
function ajaxobj(){
if (window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200)    {
        document.getElementById('asd').innerHTML = xmlhttp.responseText;
    }   
}
xmlhttp.open('GET', 'ajaxAddInput.php',true);
xmlhttp.send();
}
</script></script>
</head>
<body>
<input type="submit" onclick="ajaxobj();">
<div id="asd"></div>
</body>

php文件：

<?php
echo '<input type='"text'">';
?>

只需使用一个标准化的库，就像jQuery一样。考虑到这一点，您可以使用以下代码：

$("#asd").on('change', function() {
    var val = $(this).val();
    $.ajax("ajaxAddInput.php", {input: val});
});

或者，您也可以将库与类一起使用：

$('input[type=text]').on('change', function() {
    var val = $(this).val();
    $.ajax("ajaxAddInput.php", {input: val});
});