Question

我的目标听起来相当简单，目前我正在解决这个问题。

获取表单中文本字段的值，并将其传递给$ .ajax（）方法中使用的var，该方法发布到Google Shopping API并获取JSON响应，然后输出到网页..

到目前为止，我已经完美地运行了$ .ajax方法，它返回了Google Shopping的JSON对象。我也可以将这些输出到HTML字符串中，并在网页上显示结果。

这就是我正在使用的..

<!DOCTYPE html>
<html>
<head>
  <style>
  #images { padding:0; margin:0; overflow: hidden;}
  #images img { width:200px; height:200px; border:none;}
  #lists li { display: table;}
  #lists img { width:200px; height: 200px; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1 id="title"></h1>
<p id="description"></p>
<div id="images"></div> 
<div id="lists"></div> 

<script>


var apiKey = "key";
var country = "US";
var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";
var search = $(this).parents('form').serialize();

$.ajax({
    type: "get",
    url: apiurl,
    dataType: 'jsonp',
    data : 
    {
        key: apiKey, 
        country: country, 
        q: search,
    },
    success: function(data) {

         $.each(data.items, function(i, item){

            if (item.product.images.length > 0) // sanity check
            {

            //global variables
            var link = item.product.images[0]['link'];
            var title = item.product.title;

                var listData = "<li>" + title + "</li>" + '<img title="' + title + '" src="' + link + '" />';

                $('#lists').append(listData);

                var img = $("<img/>").attr("src", link);
                $("<a/>").attr({href: link, title: "Courtesy of me"}).append(img).appendTo("#images");

                console.log(data)
            }
        });

        // console.log(data);
        console.log(data)
    }
});

</script>
</body>
</html>

使用表单和javascript，是否可以将var'搜索'更改为用户在文本字段中输入的内容，在.ajax方法中指定我想要返回的内容？

任何建议都会很棒！

Answer 1

您可以将$ .ajax调用中的q：search替换为q：$（this）.parents（'form'）。serialize（）

Answer 2

这就是我在ajax表单中的表现。

构建一个实际上没有js或jQuery的表单。
使用jQuery将事件绑定到此表单preventDefault()并通过$.post提交。

使用表单输入在$ .ajax（）方法中设置var？

2 个答案: