Question

在我的网站上，我想为用户提供提供图片网址的可能性，然后通过AJAX将该图片加载到准备好的DateTime中。

这是包含文本框和提交按钮的表单：

<img src="">

这将是<form id="myform"> <input name="image_url" type="text" placeholder="type your image URL" /> <input type="submit" name="submit" id="submit" /> </form>代码：

<img>

我已经有了这个jQuery语句，以防止提交默认的提交按钮：

<img src="" id="image_from_url">

有人可以提示我如何在此处加入ajax调用以便将图像（从用户在表单文本框中提供的图像网址）加载到$(function () { $('#myform').on('submit', function (e) { e.preventDefault(); // ajax call here? }); });中吗？

非常感谢！

Answer 1

只需这样做：

http://jsfiddle.net/vmvuny9e/

$(function () {
    $('#myform').on('submit', function (e) {
        e.preventDefault();
        $("#image_from_url").attr("src", $("#image_url").val());
    });
});

不需要任何AJAX调用，因为您可以将图片网址放入<img> - 标记的src属性中，它将完美无瑕地运行。

我在你的输入中添加了一个ID，因为我需要从中获取值。

Answer 2

你不需要Ajax。只需抓取URL并创建一个新的图像元素：

var i = null;
$('#capture_form').on('submit', function (event) {
    if (i) {
        // update image if it already exists
        i.prop('src', this.image_url.value);
    } else {
        // create <img>-element on the fly, as you might not need it beforehand
        i = $('<img/>', { src: this.image_url.value });
        // append it as a child to another element
        $('body').append(i);
    }

    event.preventDefault();
});

<强>演示

Try before buy

Answer 3

试试这个：

var url = "Insert here the url";
$.get( url, function( data ) {
  $( "#image_from_url" ).attr('src', data );
});

Answer 4

告诉我，如果我弄错了，但我想你只想在用户点击提交按钮时加载图片。为此，您可以在提交按钮的代码中写下这个

$(function () {
  $('#capture_form').on('submit', function (e) {
    $('#capture_section').removeClass("hidden");
    e.preventDefault();
    $('#image_from_url').attr({src: "<Image URL here>"});
  });
});

使用jQuery.ajax将image src加载到<img/>

4 个答案: