使用表單中的輸入在$ .ajax（）方法中設置var？

我的目標聽起來相當簡單，目前我遇到了一個問題讓我頭腦發熱。

它是獲取表單中文本字段的值，並將其傳遞給$ .ajax（）方法中使用的一個var，該方法發佈到Google Shopping API並獲取JSON中的響應，然後將其輸出到一個網頁..

到目前爲止，我已經有了完美的$ .ajax方法，它可以從Google購物中返回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「搜索」是什麼用戶在文本字段中輸入，在阿賈克斯方法指定我想要返回的內容？

任何建議將是偉大的！

來源

2011-10-10 jcrowson

你只是要替換'VAR搜索= $（this）.parents（'form'）。serialize（）;''var'search = $（'＃textField'）。val（）;'？ –

好吧，我希望表單中的文本字段的值在提交表單時傳遞給var'search'。 – jcrowson

你可以更換問：到q搜索在$就調用：$（本）。家長（ '形式'）序列化（）

來源

2011-10-10 13:27:10

好的，爲了做到這一點，我需要提交表格。我應該將哪個事件綁定到表單上？ – jcrowson

不知道這是你在找什麼，但是當是提交表單的代碼時，我會這樣做： '$（「form」）。submit（function（e）{ e。 preventDefault（）; .... code block ... }）;'' –

下面是我如何做到這一點，當涉及到Ajax形式。

構建一個實際上沒有js或jQuery的表單。
使用jQuery將事件綁定到此表單，preventDefault()並通過$.post提交。

來源

2011-10-10 13:25:52 Rufus

使用表單中的輸入在$ .ajax（）方法中設置var？

回答

相關問題