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
        });
    });
});