AJax提交onclick Font Awesome Icon

Question

我試圖在網站上顯示一個簡單的評級選項，大拇指向上和向下，當點擊時會將響應發送到我的外部URL。

該網站將顯示在移動設備和桌面上（這就是我使用touchstart和click ）。

我需要將以下值發布到我的外部URL;

• 日期
• 時間
• 反饋（好/壞）

我已成功收到日期和時間，但沒有收到反饋類型。 看着控制台我可以看到以下內容;

我的代碼如下;

HTML

<form id="kioskFeedback">
    <a href="#" id="feedbackGood" name="Feedback" value="GOOD"> <i class="fa fa-thumbs-o-up fa-4x"></i></a>
    <a href="#" id="feedbackBad" name="Feedback" value="BAD"> <i class="fa fa-thumbs-o-down fa-4x"></i></a>
</form>

AJAX

    $(document).ready(function() {
        var today = new Date();
        var date = today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear();
        var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
        $("#kioskFeedback").on("touchstart, click", function(e) {
            event.preventDefault();
            var serializedData = $(this).serialize();
            $.ajax({
                url: "my external url here",
                type: "post",
                data: serializedData + '&Date=' + date + '&Time=' + time
            });
            .done(function(response, textStatus, jqXHR) {
                console.log('success');
            });
        });
    });

Answer 1

擴展@ ADyson的評論，查看$.serialize()的文檔http://api.jquery.com/serialize/

---

做你的工作......

更改此var serializedData = $(this).serialize();

到此var serializedData = $(this).attr('value');

這應該讓你開始。 一旦您閱讀文檔並了解<a></a>元素不是表單元素並且$.serialize()方法將不返回預期結果，您可能希望返回並更新單擊處理程序的其余部分以使用一個不同的變量名稱，如此

    $("#kioskFeedback a").on("touchstart, click", function(e) {
        e.preventDefault();
        var feedbackVal = $(this).attr('value');
        $.ajax({
            url: "my external url here",
            type: "post",
            data: {
                // If the script is expecting "Feedback" swap in place of "value"
                value: feedbackVal,
                Date: date,
                Time: time
            }
        });
        .done(function(response, textStatus, jqXHR) {
            console.log('success');
        });
    });

你也應該改變event.preventDefault(); e.preventDefault()看到您的事件信息是作為e而非event傳遞的。

你的目標需要得到也更新，因此增加了a以$("#kioskFeedback")這樣的$("#kioskFeedback a")將縮小范圍到鏈接元素。 允許您獲取屬性值。

我也附上了一個工作小提琴。

 $("#kioskFeedback a").on("touchstart, click", function(e) { e.preventDefault(); var feedbackVal = $(this).attr('value'); console.log(feedbackVal); /* $.ajax({ url: "my external url here", type: "post", data: { // If the script is expecting "Feedback" swap in place of "value" value: feedbackVal, Date: date, Time: time } }); .done(function(response, textStatus, jqXHR) { console.log('success'); }); */ }); 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="kioskFeedback"> <a href="#" id="feedbackGood" name="Feedback" value="GOOD"> <i class="fa fa-thumbs-o-up fa-4x"></i></a> <a href="#" id="feedbackBad" name="Feedback" value="BAD"> <i class="fa fa-thumbs-o-down fa-4x"></i></a> </form>