更新多个 ID答案

【问题标题】：Update multiple IDs更新多个 ID
【发布时间】：2021-06-22 12:21:14
【问题描述】：

我的目标是一个简单的代码，我在其中提交一个值，该值被更新为两个（或更多）ID。我在下面提供的代码是一个工作（和简单）代码，但无法使用表单中的值更新为 ID，因此我知道它不是正确的代码，但它在（有点）正确的方向。

<!DOCTYPE html>
<html>
    
<head>

<title>AJAX TEST</title>


<script>
$(document).on("submit", "form", function(e){
 var formID = $( this ).closest('form').attr('name');
 var data = $( this ).serializeArray();
 console.log(JSON.stringify(data) + " -> " + formID);
 $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : '/dev/Ajax2021/parse.dna',
            data        : data,   // our data object
            dataType    : 'text', // what type of data do we expect back from the server
            success     : function (data, status)
            {
                $('#' + formID).html(data); //content loads here
                console.log(data);
            },
            error: function (xhr, desc, err)
            {
                console.log("error");
            }
 })
 e.preventDefault();
});
</script>

</head>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="_geo_1" action="">
    <input type="text" name="number" value="123">
    <input type="text" name="name" value="start">
    <button>Submit 1</button>
</form>

<hr><br>

<div id="_geo_1" style="border: 1px solid black; padding: 10px; margin: 10px;">
    Text to be replaced with content from the parse.dna file
</div>

<div id="_geo_2" style="border: 1px solid black; padding: 10px; margin: 10px;">
    Text to be replaced with content from the parse.dna file
</div>

</body>
</html>

parse.dna file

<div id="_geo_1">
    The new content to replace the original ID content
</div>

<div id="_geo_2">
    The new content to replace the original ID content
</div>

<!-- The values from
    <input type="text" name="number" value="123">
    <input type="text" name="name" value="start">
    will be a part of this in the next stage. Until then just replacing some static text
-->

【问题讨论】：

对不起，我还是没听懂你的问题。请详细说明。
不清楚，您发送了POST 请求，并希望根据该POST 更新字段？如果是这种情况，您不需要使用从 success 函数返回的 data。
代码存在许多问题。您包含 jQuery 两次，您有两个 </body> 结束标记，其中第一个应该是开始标记 <body>。不清楚parse.dna 做了什么。
对不起，多余的

标签： html jquery css ajax

【解决方案1】：

对于它的价值：这是一个有效的 sn-p，它展示了如何实现您的一些观点：

$( document ).on("submit", "form", function(e){
 var formID = $( this ).closest('form').attr('name');
 var data = $( this ).serializeArray();
 console.log(JSON.stringify(data) + " -> " + formID);
 $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'https://jsonplaceholder.typicode.com/users',
            //            '/dev/Ajax2021/parse.dna', // the url where we want to POST to
            data        : data,   // our data object
            dataType    : 'text', // what type of data do we expect back from the server
  //        encode      : true,   // not needed here
            success     : function (data, status)
            {
                $('#' + formID).html(data); //content loads here
                console.log(data);
            },
            error: function (xhr, desc, err)
            {
                console.log("error");
            }
 })
 e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="_geo_1" action="">
    <input type="text" name="number" value="123"> <input type="text" name="name" value="start">
    <button>Submit 1</button>
</form>

<hr><br>

<div id="_geo_1" style="border: 1px solid black; padding: 10px; margin: 10px;">
    Placeholder 1
</div>

<div id="_geo_2" style="border: 1px solid black; padding: 10px; margin: 10px;">
    Placeholder 2
</div>

我用<div>s 替换了您的<span> 元素，并为$.ajax() 调用使用了另一个API。

【讨论】：

嗨，卡斯滕。感谢您的输入。我已经在我的原始帖子和初始帖子中替换了您的代码。我快到了，但是...提交表单时，然后...原始 id:_geo_1 中的内容被 parse.dna 文件中的 id:_geo_1 和 id:_geo_2 替换。原来的 id:_geo_2 根本没有被替换。预期的结果应该是 _geo_1 被 _geo_1 替换，_geo_2 被 _geo_1 替换......看起来它只是替换了与 Form 同名的 ID。不应涉及表单名称