php - jquery、json 和成功函数

Question

我已经编写了这段代码，但我无法使其正常工作......:

<script>
$(document).ready(function(){
    $(document).on('click','.a_mod', function(e){
        e.preventDefault();
        var id =  $(this).attr('rel');
        var var_id = '<?php echo $id ?>';
        var data_3 = 'id=' + id + '&var_id=' + var_id;
        $.ajax({
            type: "POST",
            data: data_3,
            cache: false,
            dataType: 'json',
            url: "php/show_tariffa.php",
            success: function(html){
                var obj = jQuery.parseJSON(html);
                $.each(obj,function(index, element){

                var id = element.id;
                var prestazione = element.prestazione;
                var prezzo = element.prezzo;
                var check = element.prezzo_mult;

                $('#id_tariffa').val(id);
                $('#nome_2').val(prestazione);
                $('#prezzo_2').val(prezzo);
                }); // fine .each

                $('#box_2').slideUp();
                $('#box_3').slideDown().css({"border-color": "#F31041"},'fast');
                } // fine success
            }); // fine ajax
    });
});
</script>

使用 Firefox 和 firebug，我可以看到事件开始并且 php 脚本被执行，但是，我不知道为什么，ajax 的“成功:”部分根本没有启动..

这是 php 脚本:

<?php

    include("connect.php");

    $id = $_POST['id'];                 // id
    $var_id = $_POST['var_id'];         // id_dentista

    $html = array();

    $query = mysql_query("SELECT
                            tariffe.id,
                            tariffe.prestazione,
                            tariffe.prezzo,
                            tariffe.prezzo_mult
                            FROM tariffe
                            WHERE tariffe.id_dentista = '$var_id' AND tariffe.id = '$id'")
                            or die(mysql_error());

    while( $row = mysql_fetch_array($query)){
        $html[] = $row;
    }

    echo json_encode($html);

?>  

怎么了？我错过了什么？

谢谢大卫，

Answer 1

更新

经过几个小时在聊天室进行故障排除后，我终于在我的服务器上安装了这段代码并设置了数据库。它工作正常，唯一的问题是每个文件开头的 BOM 签名。

您需要将文件的编码设置为 UTF8，而不是 UTF8 BOM，这样就可以了。我的猜测是返回数据的开头有一个 BOM 签名，这让 $.parseJSON() 很生气。

让我知道这是否可以解决问题，如果没有，就回到旧的绘图板。

<小时/>

如果您确定查询成功，请向您的脚本添加错误回调(或使用下面已添加的委托(delegate)脚本)。

这应该可以告诉您脚本出错的原因。

error: function(xhr, status, error) {
    console.log(status);
    console.log(error);
    console.dir(xhr);

}

另外，我不确定 FF，但在 Chrome 中，您可以转到“网络”选项卡并单击您的 ajax 脚本。然后您可以查看正在发送的数据和响应。您可能遇到数据类型/内容类型问题。

旁注:

您应该委托(delegate) AJAX 调用来正确处理事件冒泡。

您还应该验证您的输入，而不是直接访问超全局 $_POST。

您也不应该在 JS 中使用 PHP。相反，在 HTML 中创建一个元素并替换此...

var var_id = '<?php echo $id ?>';

有了这个...

HTML

<input id="hiddenId" type="hidden" value="<?php echo $id; ?>">

jQuery

var var_id = $("#hiddenId").val();

委托(delegate) Ajax

(function($){
    $(function(){


        //Usage Example

        var inputString = $("#myInput").val();
        var inputNumber = $("#myInteger").val();
        var data = {inputString: inputString, inputNumber : inputNumber};

        $('parent').on('click', 'button', delegateAjax('js/myAjax.php', data, 'POST');

    });

    function delegateAjax(url, data, responseType, dataType, callback) {

        function successHandler() {
            console.log("Ajax Success");
        };

        function failureHandler(xhr, status, error) {
            console.log("Ajax Error");
            console.log(status);
            console.log(error);
            console.dir(xhr);
        };

        function handler404(xhr, status, error) {
            console.log("404 Error");
            console.log(status);
            console.log(error);
            console.dir(xhr);
        };

        function handler500(xhr, status, error) {
            console.log("500 Error");
            console.log(status);
            console.log(error);
            console.dir(xhr); 
        };

        url = typeof url !== 'undefined' ? url : 'js/ajaxDefault.php';
        data = typeof data !== 'undefined' ? data : new Object();
        responseType = typeof responseType !== 'undefined' ? responseType : 'GET';
        dataType = typeof dataType !== 'undefined' ? dataType : 'json';
        callback = typeof callback !== 'undefined' ? callback : 'callback';

        var jqxhr = $.ajax({url: url, type: responseType, cache: true, data: data, dataType: dataType, jsonp: callback, 
                            statusCode: { 404: handler404, 500: handler500 }});
        jqxhr.done(successHandler);
        jqxhr.fail(failureHandler);
    };
})(jQuery); 

正确验证/清理输入

$args = array(
    'inputString' => array(
        'filter' => FILTER_SANITIZE_STRING,
        'flags' => FILTER_REQUIRE_SCALAR
    ),
    'inputNumber' => array(
        'filter' => FILTER_VALIDATE_INT,
        'flags' => FILTER_REQUIRE_SCALAR
    ),
    'inputNumber2' => array(
        'filter' => FILTER_VALIDATE_INT,
        'flags' => FILTER_REQUIRE_SCALAR
    )
);
$post = filter_input_array(INPUT_POST, $args);
if ($post) {


        $response = array('status' => 'success');
        echo json_encode($response); exit;
}