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

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和描述：

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

列表中的每张照片都由一个 url 和一个描述组成。

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

在这个例子中，对话框内的输入字段和文本区域没有被 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 元素的情况下调用form.reset()。我将表单元素包装在form 中。这有一个额外的好处，现在可以响应提交的表单，例如，如果用户输入一个 url 并点击 enter。

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");
      }
    }
  });
});