将图像src加载到<；img>；使用jQuery.ajax

在我的网站上，我希望用户能够提供一个图像URL，然后通过AJAX将该图像加载到一个准备好的

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

<form id="myform">
  <input name="image_url" type="text" placeholder="type your image URL" />
  <input type="submit" name="submit" id="submit" />
</form>

有谁能给我一个提示，告诉我如何在这里包含一个ajax调用，以便将图像（从用户在表单文本框中提供的图像url）加载到

多谢各位

试试这个：

$(function () {

    $('#myform').on('submit', function (e) {

      e.preventDefault();

    // ajax call here?

    });

  });

试试这个：

$(function () {

    $('#myform').on('submit', function (e) {

      e.preventDefault();

    // ajax call here?

    });

  });

---

如果我弄错了，请告诉我，但我认为您只想在用户单击submit按钮时加载图像。 为此，您可以将其写入提交按钮的代码中

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

$（函数（）{
$（'capture_form'）。关于（'submit'，函数（e）{
$（'capture_section'）。removeClass（“隐藏”）；
e、 预防默认值（）；
$（“#image_from_url”）.attr（{src:”}）；
});
});

如果我搞错了，请告诉我，但我认为您只想在用户单击提交按钮时加载图像。 为此，您可以将其写入提交按钮的代码中

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

$（函数（）{
$（'capture_form'）。关于（'submit'，函数（e）{
$（'capture_section'）。removeClass（“隐藏”）；
e、 预防默认值（）；
$（“#image_from_url”）.attr（{src:”}）；
});
});

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

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

var i=null；
$（'capture_form'）。关于（'submit'，函数（事件）{
如果（i）{
//更新已存在的图像
i、 prop（'src'，this.image\u url.value）；
}否则{
//创造
演示

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

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

var i=null；
$（'capture_form'）。关于（'submit'，函数（事件）{
如果（i）{
//更新已存在的图像
i、 prop（'src'，this.image\u url.value）；
}否则{
//创造
演示

只需执行以下操作：


不需要任何AJAX调用，因为您只需将图像URL放入
属性，它就能完美地工作

我在您的输入中添加了一个ID，因为我需要从中获取值。
只需执行以下操作：


不需要任何AJAX调用，因为您只需将图像URL放入
属性，它就能完美地工作

我在你的输入中添加了一个ID，因为我需要从中获取值。
你这里不需要ajax。只要
.prop（）
就足够了。@ShaunakD:谢谢！你能解释一下如何使用这个方法吗？你这里不需要ajax。只要
.prop（））
就足够了。@ShaunakD:谢谢！你能解释一下如何使用这个方法吗？谢谢你的回答-只有一个问题：我该如何“发布”首先，将URL导入变量？建议使用相对路径，以避免出现COR问题，但这取决于您的目标地址，
.src
方法对jquery对象不可用，并且无法工作。是的，我的错，您可以使用
.attr（）
谢谢您的回答-只有一个问题：我如何“发布”首先将URL导入变量？建议使用相对路径，以避免出现COR问题，但这取决于您的目标地址，
.src
方法对jquery对象不可用，并且无法工作。是的，我的错，您可以使用
.attr（）
感谢您的回答-但是
？我已经用一个解决方案更新了我的答案，以便动态创建元素或更新它（如果它已经存在）。如果您有
。感谢您的回答-但是
？我已经用一个解决方案更新了我的答案，以便动态创建元素或更新它（如果它已经存在）。如果您有
。您可以保存一个DOM请求，而不需要额外的id。只需使用
this.image\u url.value
。由于您已经有了
表单
-元素，您可以使用vanilla JS通过其名称访问其字段。您可以保存一个DOM请求，而不需要额外的id。只需使用
this.image\u url.value
。正如您有了它一样e
form
-元素已经可以使用vanilla JS通过其名称访问其字段。