Question

我正在尝试使用我的json数组的服务器副本填充我的表单，但它似乎是从本地副本中提取的。现在我有一个函数，当我点击一个矩形（每个矩形代表一个json对象在数组中）时填充表单。

例如，如果我更改表单上的选择选项attributeName并提交，它会将更改正确保存到json数组中的服务器，但是当我单击另一个矩形并且来时回到带有更改的矩形，它不会填充带有更改的表单字段（不会从服务器json数组中拉出来）。

如果我加载一个不同的数组，或者如果我刷新页面，那么它的工作原理......如何在不刷新的情况下获取数组的本地副本以反映更改？

这是功能：

$(function() {
  function populateForm() {

    var matchingWidth = $('#canvas-overlay > .rectangle.targeted').width();
    $(".rectangle.null").each(function() {
      if ($(this).width() === matchingWidth) {
        var ID_clicked = $(this).attr('id');

        // populate form function
        function populate(frm, data) {
          $.each(data, function(key, value){
              var ctrl = $('[name='+key+']', frm);
                    switch(ctrl.prop("type")) {
                        case "radio": case "checkbox":
                            ctrl.each(function() {
                                if($(this).attr('value') == value) {
                                  $(this).prop("checked", true);
                                  $("#attribute-form .ui.radio.checkbox").removeClass('checked');
                                  $(this).parent().addClass('checked');
                                }
                            });
                            break;
                        default:
                            ctrl.val(value);
                    }
            });
          }
          var selection = $('#templateSelection > option:selected').text();
          // create variable for and expose JSON
          var json = (function () {
            var json = null;
            $.ajax({
                'async': false,
                'global': false,
                'url': 'server/php/data/' + selection,
                'dataType': "json",
                'success': function (data) {
                    json = data;
                }
            });
            return json;
          })();
          // search json for index value that matches id clicked
          // and populate form with associated object
          json.some(function(e) {
            if (e.ID === ID_clicked) {

                var values = json.map(function(e) { return e.ID; });
                var index = json.map(function(e) { return e.ID; }).indexOf(ID_clicked);

                var data = JSON.stringify(json[index]);
                populate('#attribute-form', $.parseJSON(data));

                return true; // stops the "loop"
            }
          });
        }
      });
  }
  $(document).on('click', '#canvas-overlay > .rectangle', function() {
    $('#canvas-overlay > .rectangle').removeClass('targeted');
    $(this).addClass('targeted');
    populateForm();
  });
});

以及此处的参考是process.php，这是提交时的操作：

<?php

   $filename = $_POST['store-template-name'];
   $myFile = "data/" . $filename;
   $arr_data = array(); // create empty array

  try
  {
       //Get form data
       $formdata = array(
          'ID'=> $_POST['ID'],
          'attributeName'=> $_POST['attributeName']
       );
       //Get data from existing json file
       $jsondata = file_get_contents($myFile);
       // converts json data into array
       $arr_data = json_decode($jsondata, true);
       $updateKey = null;
       foreach ($arr_data as $k => $v) {
            if ($v['ID'] == $formdata['ID']) {
                $updateKey = $k;
            }
        }
        if ($updateKey === null) {
            array_push($arr_data,$formdata);
        } else {
            $arr_data[$updateKey] = $formdata;
        }

       $jsondata = json_encode($arr_data);

       if(file_put_contents($myFile, $jsondata)) {
            echo 'Data successfully saved';
        }
       else
            echo "error";
   }
   catch (Exception $e) {
            echo 'Caught exception: ',  $e->getMessage(), "\n";
   }
?>

Answer 1

获取请求被缓存，要么服务器端设置正确没有缓存标头，要么在jQuery中将缓存设置为false。

         $.ajax({
            'async': false,
            'global': false,
            cache: false,
            'url': 'server/php/data/' + selection,
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });

自己帮个忙，重构你的代码而不是同步。同步通话是个坏主意。 json代码之后的代码应该存在于成功回调中，或者使用done这是jQuery的推荐方法。

无法在不刷新的情况下使用json数组的服务器副本填充表单

1 个答案: