Ajax成功回调返回空

时间:2017-01-04 15:30:13

标签: javascript jquery ajax

我正在努力的一个小应用程序让我头疼。我终于让它自动完成一个具有在不同字段中输入的相同值的字段。现在我正在尝试将它与AJAX请求结合起来。这是脚本应该做的事情。

当在输入框中输入某些单词时,旁边的输入框应自动以不同的语言包含该单词。我正在使用一个小PHP脚本,这与我面临的问题无关。 PHP脚本输出“bonjour”一词。当我输入“你好”这个词时,我输入的旁边的输入框应该使用ajax请求自动自动完成'bonjour'。知道此输入框是包含数千个输入对的表单的一部分可能很重要。自动完成的部分可以工作,但是当我尝试将它与AJAX请求结合使用时,成功返回数据仍为空。有没有人知道为什么这个请求数据仍然是空的?当第一个输入值发生变化时,我会尝试提醒它。

var handleData = function (data) {
    alert(data);
}
var word = '';
$("table").on('change', '.master', function () {
    $.ajax({
        url : '<?php echo site_url('wordsuggestion'); ?>/hello/english/french',
        type: 'GET',
        success : handleData
    });
});
$(document).ready(function() {
    var max_fields      = 1000; //maximum input boxes allowed 
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<tr><td><div class="form-group"><input type="text" class="master" name="or['+x+']"></div></td><td>&nbsp;</td><td><div class="form-group"><input type="text" class="slave" name="tr['+x+']"></div></td></tr>'); //add input box
        }
    });
});

这将是使用的形式。

<form method="POST">
    <table width="100%" class="input_fields_wrap">
        <tr>
            <td>
                <div class="form-group"><input type="text" class="master" name="or[0]"></div>
            </td>
            <td>&nbsp;</td>
            <td>
                <div class="form-group"><input type="text" class="slave" name="tr[0]"></div>
            </td>
        </tr>
    </table>
    <button type="submit" id="save" class="btn btn-success pull-right">Save</button>
</form>
<button class="add_field_button btn btn-default">Add more fields</button>

提前致谢!

1 个答案:

答案 0 :(得分:0)

我解决了。这是一个非常简单(愚蠢)的错误,我刚刚开始使用JS。出于某种原因,该函数需要由$(function () {})包装。

$(function () {
$("table").on('change', '.master', function () {
        $.ajax({
            url : '<?php echo site_url('wordsuggestion'); ?>/hello/english/french',
            type: 'GET',
            success : handleData
        });
    });
});