Question

我正在使用Javascript Dropbox Chooser https://www.dropbox.com/developers/dropins/chooser/js并在@smarx（How to display selected file name when using the Dropbox API JS Chooser的帮助下）我已设法获取<img src=""以将图像提取到浏览器中。

我要做的下一件事是POST将这些图片网址存储在我的localhost上的json文件中：galeria.json通过$.ajax点击提交按钮后但是，我似乎无法实现它。

我对jQuery和AJAX比较新，所以我不理解我在控制台上得到的错误响应：错误：[object，Object]。

以下是代码：

<body>
<form class="gallery-form" action="galeria.json" method="POST">
  <input id="chooser" type="dropbox-chooser" name="selected-file" data-link-type="direct" data-multiselect="true" style="visibility: hidden;"/>
  <div id="chosen" style="display:none"></div>
  <input type="submit" id="submit" value="Enviar" disabled />
</form>

<script>
    $(function () {
        $('#chooser').on('DbxChooserSuccess', function (e) {
          for (var i = 0; i < e.originalEvent.files.length; i++) {
            var url = e.originalEvent.files[i].link;
            var filename = e.originalEvent.files[i].name;
            var linkTo = "<img src='" + url + "'" + ">" + "</img>";

            $('#chosen').show();
            $('#chosen').append(linkTo);
          }
            $('#submit').prop('disabled', false);

            $(".gallery-form").submit(function(event) {
              event.preventDefault();
              $.ajax({
                type: "POST",
                url: "galeria.json",
                dataType: "json",
                data: {imgUrl: url},
                success: function(response){
                  console.log("Success: " + response.imgUrl);
                },
                error: function(error){
                  console.log("Error: " + error);
                }
              });
            });
        });
    });
</script>
</body>

如果您想更多地帮助我，那么这样做的目的是将GET那些img url从galeria.json文件发送到我的index.html并将其插入一个画廊<section id="gallery">。

Answer 1

您在服务器上运行什么代码来接收JSON请求？我怀疑你在这里错过了一块。您将URL发送到服务器的代码看起来是正确的，但这不是唯一需要的步骤。在服务器上，您需要一些代码来接收请求并将URL写入文件。

Answer 2

您可能希望将URL存储在数组中，然后将其提交给服务器。请注意，在AJAX请求中，我假设您有一个服务器接受对资源“/ images”的发布请求。

<script>
  $(function () {
      $('#chooser').on('DbxChooserSuccess', function (e) {
        var urls = [];
        for (var i = 0; i < e.originalEvent.files.length; i++) {
          var url = e.originalEvent.files[i].link;
          urls.push(url);
          var filename = e.originalEvent.files[i].name;
          var linkTo = "<img src='" + url + "'" + ">" + "</img>";

          $('#chosen').show();
          $('#chosen').append(linkTo);
        }
        $('#submit').prop('disabled', false);

        $(".gallery-form").submit(function(event) {
          event.preventDefault();
          $.ajax({
            type: "POST",
            url: "/images",
            dataType: "json",
            data: {imgUrls: urls},
            success: function(response){
              console.log(response.message);
            },
            error: function(error){
              console.log(error.message);
            }
          });
        });
      });
  });
</script>

在服务器端（我的例子中的Rails，因为我知道你已经使用它），你将处理数组。使用ajax请求发送的JSON数据应该在params哈希中可用。 params [：imageUrls]将是url数组。

def create
  params[:imgUrls].each do |url|
    Image.create(path: url)
  end

  respond_to do |format|
    format.html
    format.json { render :json {message: 'Success!'} }
  end
end

从Dropbox JavaScript Chooser获取后的JSON Post

2 个答案: