1

我需要帮助创建具有以下内容的表单

  1. TEXTFIELD（将用于输入 7 位型号）

  2. 图像占位符（将根据 url 更改图像占位符的 src，例如它将变为 src="http://yourwebsite.com/product/ TEXTFIELD .jpg）

  3. 我需要以某种方式从产品的 url 中获取 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>

~编辑于 2012 年 5 月 29 日上午 9:00~

  1. 如果您按 Enter，则在文本字段中输入的值将被删除
  2. 我需要一种方法来使用相应的 URL 来获取存储在 H1 标签中的产品描述（URL 是在文本字段中输入的型号，但使用的 url 结构与用于抓取图像的结构略有不同，见下文... http://mywebsite.com/ProductDetails.aspx?productid= TEXTFIELD ) ***我应该注意，用于获取 H1 数据的 URL 将是“跨域”并且不一定在某些领域。我读到 jquery 可能不会在跨域上发出请求
4

3 回答 3

3

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

从http://www.jquery.com 获取Jquery 的副本，或者通过将其粘贴到您的 head 部分来使用 CDN 版本：

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

这是一个简化版本：

如果你的 URL 的开始和结束部分不会改变，你可以简化你的表单：

​&lt;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 代码（和脚本标签）粘贴到您的 head 部分

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

如果您想在没有 Jquery的情况下执行此操作，并且您的 html 必须保持如上，您可以将以下内容与原始 html 一起使用（注意代码中的拼写错误）：

<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 事件可以更改为模糊、更改等，具体取决于您要如何更新图像。我建议使用一个按钮，以便用户在他们认为代码有效时可以更新图像。

更新​</p>

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

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

于 2012-05-29T01:49:47.837 回答
1

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

$(function () {  
    $('#model').change(function () {
        $('img[name="productimage"]').attr('src', $('#start').val() + $('#model').val() + $('#end').val());
    });
});
于 2012-05-29T01:48:36.757 回答
0

在你的 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() );
           });
        }
    });
于 2012-05-29T02:05:03.887 回答