JS Post to Php Issue

Question

我被困在這一個。 我認為這應該很簡單，但我沒有成功。 我只是想將href標記中的變量發布到單獨文件的php函數中。 我正在嘗試在成功的警告框中測試我的JS。 我沒有警報框“成功警報框測試！”。

知道我在做什么錯嗎？ 我猜這是我的成功功能存在的問題。

再次感謝！ 非常感激。

HTML：

<a href="#" class="target" data-review="1">Click here</a>

JS：

$(document).ready(function() {
    $( ".target" ).click(function(e) {
        e.preventDefault();
        var review_id = this.data('review');
        $.ajax({
            url : "vote_add.php",
            type : "POST",
            dataType: "json",  
            data : {
                reviewId : review_id
            },
            success : function(data) {
                if (data == 'success')  {
                    alert('Success alert box test!');
                } else {
                    alert(data);    
                }
            }
        });
    });
});

Vote_add.php：

<?php

echo "success";


?>

Answer 1

$(document).ready(function() {
$( ".target" ).click(function(e) {
        e.preventDefault();

        var review_id = $(this).data('review');
        $.ajax({
            url : "/echo/json/",
            type : "POST",
            dataType: "json",  
            data : {
                reviewId : review_id
            },
            success : function(data, status) {
                if (status == 'success')  {
                    alert('Success alert box test!');
                } else {
                    alert(data);    
                }
            }

            });

});
});

您在第5行有錯誤， this應該是$(this) -jQuery對象，並且還應該使用2nd參數來獲取success ，即status 。

為了更輕松地調試，只需使用FireBug或DevTools。

Answer 2

有幾件事可以改善您的代碼並改善我的經驗，我相信您應該更改：

• $(this).data('review')應該可以工作。

.data()方法允許我們以一種安全的方式將任何類型的數據附加到DOM元素上，以防止循環引用，從而避免內存泄漏。

從jQuery 1.6開始， .prop（）方法提供了一種顯式檢索屬性值的方法，而.attr（）則檢索屬性。

• 您提供的$ .ajax（）選項上的回調函數應類似於.done() .fail() .always()和.always() .then()

$.ajax()從jQuery 1.5開始由$.ajax()返回的jqXHR對象實現Promise接口，為它們提供Promise的所有屬性，方法和行為。

棄用通知： 從jQuery 1.8開始，不再使用jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回調。

• 根據您設置Web服務的方式，您應該能夠在服務器代碼中設置一個斷點（我假設您可以訪問它還是自己構建？）。 如果不可能，請使用Firebug或任何其他開發人員工具欄檢查.fail()返回的data對象，並查找xhr.statusText或xhr[0].statusText （同樣，取決於您的Web服務返回它的方式。）

成功： 類型：Function（PlainObject data，String textStatus，jqXHR jqXHR）如果請求成功，則要調用的函數。 該函數傳遞了三個參數：服務器返回的數據，根據dataType參數設置格式； 描述狀態的字符串； 和jqXHR對象（在jQuery 1.4.x中為XMLHttpRequest）。

jqXHR.done（function（data，textStatus，jqXHR）{}）; 成功回調選項的替代結構.done（）方法替換了不推薦使用的jqXHR.success（）方法。

• 如果將“ POST”用於Web服務，則可能需要將其作為JSON字符串發送。 JSON.stringify()可以幫助實現這一點。 缺少一些瀏覽器支持，但您可以使用polyfill修復此問題

• 最后但並非最不重要的一點，如果要發送json，則希望返回json。 <? echo "success" ?> <? echo "success" ?>恐怕不會削減它。 查看這篇文章 ，了解我的意思。

json類型將提取的數據文件解析為JavaScript對象，並將構造的對象作為結果數據返回。 為此，當瀏覽器支持時，它使用jQuery.parseJSON（）。 否則，它將使用Function構造函數。 格式錯誤的JSON數據將引發解析錯誤（有關更多信息，請參見json.org）。 JSON數據以簡明且易於JavaScript解析的方式方便了通信結構化數據。 如果獲取的數據文件位於遠程服務器上，請改為指定jsonp類型。

。

$(function () {
    var ajaxOptions = {
        url: "vote_add.php",
        type: "POST",
        dataType: "json"
    };

    $(".target").click(function (e) {
        var options,
            optionsData = {
                reviewId: $(this).data('review')
        };

        e.preventDefault();

        //options = $.extend({}, ajaxOptions, { data: optionsData });
        options = $.extend({}, ajaxOptions, { data: JSON.stringify(optionsData) });

        $.ajax(options).done(function (data) {
            // success so use your data object
            // are you looking for a property?
            var myProperty = 'myProperty';
            if (data.hasOwnProperty(myProperty)){
                var myValue = data[myProperty];
            }
        }).fail(function (xhr) {
            // do something on error
            console.warn("myscript.js > " + xhr.statusText + ' ' + xhr.status);
        }).always(function() {
            // do something no matter what happens
        });
    });
});