Question

EDIT2：我正在尝试使用java更新我的代码，但它无法正常工作（我想我错过了控制器中的内容）：

    $(document).ready(function() {
  var listGraphic = new Array();

  function addPhoto(u, d) {
    $.ajax({
        url: "aggiungiEpigrafe",
        type: "POST",
        data: {"graphicUrl": u, "graphicDesc": d},
        success: function(data) {
            var $url = $("<form:input>").attr({
                path: "graphicUrl",
                disabled: true
              }).html(u);
              var $desc = $("<form:input>").attr({
                path: "graphicDesc",
                disabled: true
              }).html(d);
              $("#listGraphic").append($url, "<br />", $desc, "<br /><br />");
            $(this).dialog("close");
        },
        error: function(xhr, textStatus, error){
           console.log(xhr.statusText);
           console.log(textStatus);
           console.log(error);
        }

    });
  }

  $("button#insertFoto").button().click(function() {
    $('#insertPhoto').dialog("open");
    return false;
  });

  $("#newPhoto").submit(function(e) {
    e.preventDefault();
    var url = $("#graphicUrl").val();
    var desc = $("#graphicDesc").val();
    listGraphic.push(url);
    listGraphic.push(desc);
    console.log(listGraphic);
    addPhoto(url, desc);
    $("#graphicUrl").val("");
    $("#graphicDesc").val("");
    if ($('#insertPhoto').dialog("isOpen")) {
      $('#insertPhoto').dialog("close");
    }
  });

  $('#insertPhoto').dialog({
    autoOpen: false,
    buttons: {
      "Close": function() {
        $(this).dialog("close");
      },
      'Insert': function() {
        $("#newPhoto").submit();
      }
    }
  });
});

EDIT1： 根据Twisty的建议，我提升了对话框，以便内部没有任何形式（因为此对话框已经在表单中）：https://jsfiddle.net/e57sj6hp/18/

由于Twisty也在评论，我可能需要ajax，但我必须了解如何使用它;我想我需要使用serialize（）或seralizeArray（），但我不太清楚控制器应该如何接收json并使用它。

我有一个像这样的控制器：

    public String myMethod(@ModelAttribute MyObject object, ModelMap model){...}

该对象包括一个照片列表，以及两个变量url和description：

List<Photo> photos;
String url;
String description;

列表中的每张照片都是由网址和说明组成的。

在我的jsp中，我创建了一个带有jquery的对话框，用户可以在其中放置url和描述，我想要做的是将每个值添加到列表中并将其发送到控制器，然后清理对话框以便允许另一个提交。我已经尝试了很多，但无法理解我应该怎么做。我正在使用spring的形式，我尝试了很多不同的方法，但我认为问题出在我的javascript代码中。这是一个例子：https://jsfiddle.net/e57sj6hp/12/

在这个例子中，对话框内的输入字段和textarea没有用spring的表单标签包围，因为我将结果附加到div中，我认为，在提交时，控制器应该接收表单中的数据：刚刚创建的输入。

Answer 1

不熟悉Spring，所以我可能会错过一个元素，但是与您在示例中的内容相匹配，我可以提供一些潜在的更新。

工作示例：https://jsfiddle.net/Twisty/e57sj6hp/16/

HTML已更新

<div id="insertPhoto" style="display:none" title="Insert a Photo">
  <form id="newPhoto">
    <label>Url:</label>
    <br/>
    <input id="graphicUrl" />
    <br/> Description:
    <br/>
    <textarea rows="4" cols="20" id="graphicDesc"></textarea>
  </form>
</div>

如果没有form.reset()元素，则无法致电form。我将表单元素包装在form中。这有额外的好处，现在响应提交的表单，例如，如果用户输入一个网址并点击输入。

<强>的jQuery

$(document).ready(function() {
  var listGraphic = new Array();

  function addPhoto(u, d) {
    var $url = $("<form:input>").attr({
      path: "graphicUrl",
      disabled: true
    }).html(u);
    var $desc = $("<form:input>").attr({
      path: "graphicDesc",
      disabled: true
    }).html(d);
    $("#listGraphic").append($url, "<br />", $desc);
  }

  $("button#insertFoto").button().click(function() {
    $('#insertPhoto').dialog("open");
    return false;
  });

  $("#newPhoto").submit(function(e) {
    e.preventDefault();
    var url = $("#graphicUrl").val();
    var desc = $("#graphicDesc").val();
    listGraphic.push(url);
    listGraphic.push(desc);
    console.log(listGraphic);
    addPhoto(url, desc);
    $(this)[0].reset();
    if ($('#insertPhoto').dialog("isOpen")) {
      $('#insertPhoto').dialog("close");
    }
  });

  $('#insertPhoto').dialog({
    autoOpen: false,
    buttons: {
      "Close": function() {
        $(this).dialog("close");
      },
      'Insert': function() {
        $("#newPhoto").submit();
      }
    }
  });
});

这里有很多小修复和改进。我将listGraphic移出了函数，因此可以更全面地更新它。这允许它从其他回调中更新和读取。

我创建了这个函数，使其更容易重复。

现在无论表单是如何提交的，都会更新数组，页面也是如此。该对话框已关闭，其形式已重置。

更新1

参见新的jQuery：https://jsfiddle.net/Twisty/e57sj6hp/21/

<强>的jQuery

$(document).ready(function() {
  function addPhoto(u, d) {
    $.ajax({
      url: "aggiungiEpigrafe",
      type: "POST",
      data: JSON.stringify({
        "graphicUrl": u,
        "graphicDesc": d
      }),
      complete: function(data) {
        var $url = $("<form:input>").attr({
          path: "graphicUrl",
          disabled: true
        }).html(u);
        var $desc = $("<form:input>").attr({
          path: "graphicDesc",
          disabled: true
        }).html(d);
        $("#listGraphic").append($url, "<br />", $desc, "<br /><br />");
      }
    });
  }

  $("button#insertFoto").button().click(function() {
    $('#insertPhoto').dialog("open");
    return false;
  });

  $('#insertPhoto').dialog({
    autoOpen: false,
    buttons: {
      "Close": function() {
        $(this).dialog("close");
      },
      'Insert': function() {
        addPhoto($("#graphicUrl").val(), $("#graphicDesc").val());
        // Reset values
        $("#graphicUrl").val("");
        $("#graphicDesc").val("");
        // Close Dialog
        $(this).dialog("close");
      }
    }
  });
});

如何通过对话框将数据发送到控制器？

1 个答案: