Ajax 调用以通过单击按钮返回填充表单字段 django

Question

我想填写我的 django 字段表单以返回单击按钮功能。这样做的原因是允许手动和单击按钮选项。点击按钮功能从串行连接的设备收集读数。我怎样才能为此目的使用 ajax 调用 - 感谢您的帮助。 a screen shot of my page

enter image description here

Answer 1

var ReadingNumber = ["First_Reading", "Second_Reading", "Third_Reading", "Fourth_Reading"];
// First Reading button
//for (i = 0; i < ReadingNumber.length; i++) {
 $(function () {
//        text=''
        var button_id = '.Insert_'
        button_id += ReadingNumber[0]
//        console.log(button_id);
          $(button_id).click(function () {
            $.ajax({
              url: '/output/get_reading/',
              type: 'GET',
              dataType: 'json',
              success: function (data) {
              var field_id = ReadingNumber[0]
                    field_id += '_Field'
//                     console.log(field_id);
              var elem = document.getElementById(field_id);

              htmlString =' <input type=number step=any name="First_Reading" maxlength="200"  required id="id_'
              htmlString += ReadingNumber[0]
              htmlString += '" value='
              htmlString += data + '>'
//              console.log(htmlString);
              elem.innerHTML = htmlString


//                    console.log();
              }
            });
          });

        });
//}
 // Second Reading button
 $(function () {

          $(".Insert_Second_Reading").click(function () {

            $.ajax({
              url: '/output/get_reading/',
              type: 'GET',
              dataType: 'json',
              success: function (data) {
              var elem = document.getElementById('Second_Reading_Field');
              htmlString =' <input type=number step=any name="Second_Reading" maxlength="200" required id="id_Second_Reading" value ='
              htmlString += data + '>'
              //              console.log(htmlString);
              elem.innerHTML = htmlString


//                    console.log();
              }
            });
          });

        });


// Third Reading button
 $(function () {

          $(".Insert_Third_Reading").click(function () {

            $.ajax({
              url: '/output/get_reading/',
              type: 'GET',
              dataType: 'json',
              success: function (data) {
              var elem = document.getElementById('Third_Reading_Field');
              htmlString =' <input type=number step=any name="Third_Reading" maxlength="200" required id="id_Third_Reading" value ='
              htmlString += data + '>'
//              console.log(htmlString);
              elem.innerHTML = htmlString


//                    console.log();
              }
            });
          });

        });


// Fourth Reading button
 $(function () {

          $(".Insert_Fourth_Reading").click(function () {

            $.ajax({
              url: '/output/get_reading/',
              type: 'GET',
              dataType: 'json',
              success: function (data) {
              var elem = document.getElementById('Fourth_Reading_Field');
              htmlString =' <input type=number step=any name="Fourth_Reading" maxlength="200" required id="id_Fourth_Reading" value ='
              htmlString += data + '>'
//              console.log(htmlString);
              elem.innerHTML = htmlString


//                    console.log();
              }
            });
          });

        });