是否使用表单输入在$.ajax()方法中设置变量？
是否使用表单输入在$.ajax()方法中设置变量？
提问于 2011-10-10 21:20:53
我的目标听起来相当简单，目前我的头脑还不清楚。
它的目的是获取表单中文本字段的值，并将其传递给$.ajax()方法中使用的变量，该方法将发布到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，是否可以将变量'search‘更改为用户在.ajax方法中在文本字段中输入的内容，以指定我想要返回的内容？
任何建议都是很棒的！
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-10-10 21:27:11
您可以将$.ajax调用中的q: search替换为q：$(this).parents('form').serialize()
Stack Overflow用户
发布于 2011-10-10 21:25:52
下面是我在处理ajax表单时是如何做到的。
- 生成一个不需要js或jQuery即可实际工作的表单。
- 使用jQuery将事件绑定到此表单、
preventDefault()并通过js提交
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7713387
复制相关文章
相似问题
腾讯云开发者
