jquery,json和成功函数

时间:2015-07-02 17:44:32

标签: php jquery ajax json

我已编写此代码,但我无法使其正常工作..:

<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的“success:”部分根本没有启动..

这里有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);

?>  

怎么了?我错过了什么?

感谢Davide,

1 个答案:

答案 0 :(得分:2)

更新

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

您需要将文件的编码设置为UTF8,而不是UTF8 BOM,您应该很好。我的猜测是在返回数据的开头有一个BOM签名,它使$ .parseJSON()生气。

如果能解决问题,请告诉我,如果没有,则会回到原来的绘图板上。

如果您确定查询成功,则向脚本添加错误回调(或使用下面的委托脚本及其已添加的)

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

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

}

另外,我不确定FF,但在Chrome中,您可以转到网络标签,然后点击您的ajax脚本。然后,您可以查看正在发送的数据和响应。您可能遇到datatype / contenttype问题。

enter image description here

enter image description here

旁注:

您应该委派您的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();

委派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;
}