jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签

这里是详细的攻略：

1. 发送Ajax请求获取list数据

在jQuery中，要使用$.ajax()函数发送请求从服务器获取list数据，将其赋值给input标签前，需要先确保你能够得到list数据。在$.ajax()函数的success回调函数中处理从服务器返回的数据，如下所示：

$.ajax({
    url: "your/url/here",
    type: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function(xhr) {
        console.log(xhr);
    }
});

注意要替换your/url/here为正确的URL地址。success回调函数将返回服务器返回的数据。在控制台中打印数据，确保你能够获得正确的响应。

2. 生成动态的 input 标签并给其赋值

一旦你收到了服务器的数据，你需要生成input标签并通过jQuery将list数据赋给这些input标签。一种方法是使用 jQuery 的 $.each() 函数遍历响应数据列表并动态生成<input>标签。如下所示：

$.ajax({
    url: "your/url/here",
    type: "GET",
    success: function(response) {
        console.log(response);
        $.each(response, function(index, item) {
            var input = $('<input>').attr({
                type: 'text',
                name: 'field[]',  //注意name属性要加上[]
                value: item
            });
            $('body').append(input);
        });
    },
    error: function(xhr) {
        console.log(xhr);
    }
});

这段代码将遍历服务器的响应数据列表并将其插入到新创建的<input>标签中，该标签被动态创建，然后使用jQuery的append()函数将其附加到<body>元素中。

3. 示例1：显示从服务器获取的数据列表

为了展示有关如何使用ajax请求动态生成input标签，并在其上设置服务器返回的数据的示例，我们将使用一个简单的PHP文件来模拟您的服务器。该PHP文件将返回包含["item1","item2","item3"]的JSON响应数据。

<?php
    $data = ["item1","item2","item3"];
    header("Content-Type: application/json");
    echo json_encode($data);
?>

使用以下HTML和jQuery代码：

<!DOCTYPE html>
<html>
<head>
    <title>List Example</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h3>List of items:</h3>
    <div id="list"></div>

    <script type="text/javascript">
        $.ajax({
            url: 'test.php',
            type: 'get',
            success: function(response){
                $.each(response, function(index, item){
                    var input = $('<input>').attr({
                        type: "text",
                        name: "field[]",
                        value: item
                    });
                    $('#list').append(input);
                });
            }
        });
    </script>
</body>
</html>

在浏览器中打开该HTML文件，您将看到在页面上动态生成的input标签改变了，其中每个标签的值来自模拟服务器的响应数据列表。

4. 示例2：使用输入框生成新的input标签

这里我们将使用另一个示例，该示例从一个文本输入框中获取输入，并在文本框中按Enter键后动态生成新的input标签并设置为输入值。这里假设该文本输入框的ID为myInput。

<!DOCTYPE html>
<html>
<head>
    <title>List Example</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h3>Enter an item:</h3>
    <input type="text" name="newField" id="myInput" onkeyup="addInput(event)">
    <div id="list"></div>

    <script type="text/javascript">
        function addInput(event) {
            if (event.keyCode === 13) {  // Enter键按下
                var inputValue = event.target.value;
                var input = $('<input>').attr({
                    type: "text",
                    name: "field[]",
                    value: inputValue
                });
                $('#list').append(input);
                event.target.value = "";  // 清空输入框
            }
        }
    </script>
</body>
</html>

打开这个HTML文件，您会看到一个输入框和一个空的div标签。输入数据并按Enter键，会在div中动态地生成一个<input>标记，并添加到输入框的值所表示的数据列表中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签 - Python技术站