Question

我需要帮助使用以下

创建表单

TEXTFIELD （将用于输入7位数字型号）
图片占位符（将根据网址更改图片占位符的src，例如它将变为src =“http://yourwebsite.com/product/ TEXTFIELD .jpg）< / p>
我需要以某种方式从产品的网址中获取H1标签值

＃3仍然没有解决！

对于任何类型的帮助，我非常绝望。我用谷歌搜索了一整天真的需要帮助。谢谢！

我在下面有一些代码可以帮助想象我正在寻找什么。如果您需要澄清或者我有点困惑，请与我联系。

<form name="form1" method="post" action="">
       <p>7-digit product#
         <input type="text" name="model" id="model">
       </p>
       <p>
         <input name="start" type="hidden" id="start" value="http://www.mywebsite.com/Products/">
       </p>
       <p>
         <input name="end" type="hidden" id="end" value=".jpg">
       </p>
       <p><img name="proudctimage" src="=#start#model#end" width="32" height="32" alt=""></p>
     </form>

<script>
    var model_input = document.getElementById('model');
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    var image = document.getElementsByTagName('img');

    model_input.onkeyup = function(e){
       image[0].src = start.value + model_input.value + end.value;
    }
</script>

~EDITED 9:00 AM 5/29 / 12~

如果按Enter键
我需要一种方法来使用相应的URL获取存储在H1标签中的产品说明（URL是在文本字段中输入的内容的型号，但使用的网址结构与用于的网格不同的网址结构略有不同抓图片，见下文...... http://mywebsite.com/ProductDetails.aspx?productid= TEXTFIELD ） ***我应该注意，用于获取H1数据的URL将是“跨域”＆amp;不一定在某个领域。我读到jquery可能不会在跨域提出请求

Answer 1

您可以使用Jquery轻松完成此操作。

从http://www.jquery.com抓取Jquery的副本，或者将CDN版本粘贴到您的头部：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

这是一个简化版本：

如果您的网址的开头和结尾部分不会改变，您可以简化表单：

<form>
    <label>Model Num</label>
    <input type="text" name="model" id="model" />
    <input type="button" value="Update Image" id="update" />
</form>
<img src="" />

然后使用以下Jquery代码，您可以检测到更新按钮上的单击，从文本框中获取代码并将图像src属性更改为

http://mysite.com/products/typed_code_here

只需将jquery代码（和脚本标记）粘贴到您的头部

即可

<script>
    $(document).on('click','#update',function(){
        $('img').attr('src','http://mysite.com/product/'+$('#model').val()+'.jpg');
    });
</script>

如果你想这样做没有Jquery ，如果你的html必须保持如上，你可以使用以下内容和原始的html（注意代码中的拼写错误）：< / p>

<script>
    var model_input = document.getElementById('model');
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    var image = document.getElementsByTagName('img');

    model_input.onkeyup = function(e){
       image[0].src = start.value + model_input.value + end.value;
    }
</script>

根据您想要更新图像的方式，可以将onkeyup事件更改为模糊，更改等。我建议使用一个按钮，以便用户在认为代码有效时可以更新图像。

<强>更新

以下github项目使用jQuery在跨域html请求的前端取得了进展。 https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax/

基本上你只需要通过ajax（jQuery.ajax（））获取产品页面，然后在ajax回调中你必须扫描返回的HTML以获取h1元素。最终跨域ajax是一种设计模式，并且存在与之相关的最佳实践。为了h1元素而抓取整个HTML页面并不是很有效。考虑修改您的方法，如果您引用的网站不是您自己的网站，请务必查看任何版权法/条款和条件。

Answer 2

如果你使用jquery，你可以这样做：

$(function () {  
    $('#model').change(function () {
        $('img[name="productimage"]').attr('src', $('#start').val() + $('#model').val() + $('#end').val());
    });
});

Answer 3

在你的html中隐藏div。假设

<div id="loadSource"></div>

   $('#model').blur(function () {
        var modelVal = $.trim(this.value),
            startVal = $.trim($('#start').val()),
            endVal = $.trim($('#end').val());
        if( modelVal &&  startVal && endVal) {
           var imgUrl = startVal + modelVal + endVal,
               siteUrl = startVal + modelVal;
           $('img[name="productimage"]')
            .attr('src', );

           // process to get h1 tag

           $('#loadSource').load(''+ siteUrl +' h1', function() {
                  console.log( $('#loadSource h1').text() );
           });
        }
    });

根据在Textfield中输入的值更改Img Src

3 个答案: