使用HTML文本框发送JSON数据至AWX Operator API更新作业变量问题

你的代码存在几个关键问题，导致无法正确将textarea内容提交给AWX API，以下是修正方案：

问题点梳理 #

• 表单选择器错误：原代码选中的#foo不存在，HTML里的表单ID是extra_vars_form
• 请求字段名错误：AWX API需要更新的是extra_vars字段，不是extra_vars_area
• JSON数据未序列化：设置contentType: 'application/json'时，必须将数据转为JSON字符串，否则jQuery会默认用表单编码格式发送
• 认证头格式错误：Basic关键字后必须加空格，否则服务器无法识别认证信息
• 请求方法错误：更新现有作业模板要用PUT请求，POST是用来创建新资源的

修正后的post.js代码 #

var user = "admin"
var password = "XXX"

$(document).ready(function () {
    // 选中正确的表单ID
    var form = $("#extra_vars_form");
    
    form.submit(function (e) {
      e.preventDefault();
      
      // 构造正确的请求数据，键名为extra_vars
      var jsonData = {
        "extra_vars": $("#extra_vars_area").val()
      };
      
      $.ajax({
        url: 'https://xxxx/api/v2/job_templates/25/',
        dataType: 'json',
        contentType: 'application/json',
        // 将对象序列化为JSON字符串
        data: JSON.stringify(jsonData),
        // 改用PUT请求更新资源
        type: 'PUT',
        headers: {
            // Basic后添加空格
            "Authorization": "Basic " + btoa(user + ":" + password)
        },
        success: function (){
            alert('更新成功')
        },
        complete: handleData
      });
      
      function handleData(data) {
        console.log(data.responseText);
        // 查看服务器返回的详细信息，方便排查问题
      }
    });
  });

测试说明 #

在textarea中输入如下YAML内容（直接输入，不需要转义\n和引号，textarea会自动保留换行）：

---
version_of_something: "2.x.x"

提交后，再发起GET请求，就能看到extra_vars字段已更新为你输入的内容。

内容的提问来源于stack exchange，提问作者marcb4