使用ajax发布请求更新现有数据Json

时间:2018-11-19 17:33:19

标签: javascript jquery ajax post xmlhttprequest

我有一个data.json。通过GET请求,我将其放入了index.html

// example of data
//  "Rule": [
//        {
//          "Name": "rule 1",
//          "RulebookID": 2,
//          "RuleId": 72,
//          "ID": "assotiated"
//        },
//        {
//          "Name": "rule 2",
//          "RulebookID": 1,
//          "RuleId": 92,
//          "ID": "available"
//        },
      
$.ajax({
  url: 'http://localhost:3000/Main',
  type: 'GET',
  headers: { accept: 'application/json;odata=verbose;' },
})
  .done(rules)
  .fail((jqXHR, status, errorThrown) => {
    console.log(`problem loading data: ${errorThrown}`);
  });
  
  function rules(data) {
  data.Rule.forEach((obj) => {
    $('#availableRules').append(
            `<div class="form-check" id="${obj.ID}">
              <input class="form-check-input" type="checkbox"
                value="${obj.RuleId}" id="${obj.RuleId}"/>
              <label class="form-check-label" for="${obj.RuleId}">GDPR${obj.RulebookID} - ${obj.Name}</label>
            </div>`,
  });
<div class="form-group">
  <div class="checkboxes" id="availableRules">
  </div>
</div>

然后,当用户使用网站进行操作时,在changeId按钮上单击-div.form-check,将ID更改为“可用”

$('#changeId').click(() => {
  const p = $('#availableRules .form-check-input').parent('div').detach();
  p.attr('id', 'available');
  $('#availableRules').append(p);
});
<button class="btn btn-primary" id="changeId">Change id</button>

如何处理此事件并使用ajax POST / PUT请求更新Only Rule.ID值,并保留所有其他数据相同?

1 个答案:

答案 0 :(得分:0)

创建规则项时,您可以设置包括Rule.ID的ID(例如:

pipeline {
    agent any
    environment { }
    stages {
        stage('stageA') {
            steps {
                ... Do something with arg1, arg2 or arg3
            }
        }
        stage('stageB') {
            steps {
                ... Do something with arg1, arg2 or arg3
            }
        }
        ...
    }
}

根据后端的响应,只需按ID选择每个项目,然后更新innerHtml / value / style。

itemHtml = `<span id="rule_${Rule.ID}>...</span>`