javascript - 为什么 AJAX 不发送正确的 POST 数据？

Question

当用户在输入表单中键入内容时，我希望它将 POST 数据发送到 PHP 服务器并检查他们的用户名是否尚未被使用。

输入的名称为 username_signup，但由于某种原因，浏览器 [chrome 和 firefox] 发送的输入名称为 username(我确实使用了 username 最初是在我编码时，但我将其切换为 username_signup 并保存了所有内容)。这真的很烦人，因为我不知道是什么导致它发送 POST 输入名称 username 而不是正确的 username_signup。

我的 JavaScript:

$('body').on('keyup', '#username_signup', function(event) {
        /*
         * Set string variable
         */
        var string = $('#username_signup').val();

        /*
         * Set validations
         */
        $('input').alphanum();
        $('#username_signup').alphanum({
            allowSpace: false,
            maxLength: 32
        });

        /*
         * Set AJAX variable.
         */
        var request = $.ajax({
            type: 'POST',
            url: 'login/ajax_check_username_availability',
            data: {username: string},
            dataType: 'json'
        });

        /*
         * When ajax successfully completed
         */
        request.done(function(data) {
            if (data.status === true)
            {
                $('#signup_presubmit').prop('disabled', false);
                $('#username_check_fail').hide();
                $('#username_check_fail').empty();
                $('#username_check_success').show();
                $('#username_check_success').html(data.username + ' is not taken!');
            }
            else if (data.status === false)
            {
                $('#signup_presubmit').prop('disabled', true);
                $('#username_check_success').hide();
                $('#username_check_success').empty();
                $('#username_check_fail').show();
                $('#username_check_fail').html(data.username + ' has already been taken!');
            }
            else if (data.status === 'nostring')
            {
                $('#signup_presubmit').prop('disabled', true);
                $('#username_check_success').hide();
                $('#username_check_success').empty();
                $('#username_check_fail').show();
                $('#username_check_fail').html('Username needs to be at least 2 character long!');
            }
        });

        /*
         * When ajax fails
         */
        request.fail(function(data) {
            alert('Error! AJAX did not complete successfully');
        });
    });

我的看法:

<form action="<?php echo base_url(); ?>login/signup" method="post" role="form" accept-charset="utf-8" class="form-horizontal">
    <!-- Username -->
    <div class="form-group">
        <input value="<?php echo set_value('username_signup'); ?>" type="text" class="form-control" id="username_signup" name="username_signup" placeholder="username">
        <p id="username_check_success" style="color: green; font-size: .7em; margin-top: 1em; margin-bottom: 0em"></p>
        <p id="username_check_fail" style="color: red; font-size: .7em; margin-top: 1em; margin-bottom: 0em"></p>
    </div>


    <button type="submit" class="btn btn-primary">sign up (for real this time)</button>
</form>

我的 Controller :

function ajax_check_username_availability()
    {
        $data['status'] = true;
        $data['username'] = strtolower($this->input->post('username_signup'));
        if (strlen($data['username']) < 2)
            $data['status'] = 'nostring';
        else
        {
            $query = $this->db->get_where('users', array('username' => $data['username']));
            if ($query->num_rows() > 0)
                $data['status'] = false;
        }
        echo json_encode($data);
    }

所以最后，浏览器发送 $_POST['username'] 而不是(逻辑)$_POST['username_signup']

知道是什么造成了这种烦恼吗？ (我正在使用 Codeigniter 框架)

Answer 1

是的，您按照在参数“数据”中使用的请求执行任务“用户名”。如果将其更改为“username_signup”，您将在 php.ini 中获得“username_signup”。像这样

    var request = $.ajax({
        type: 'POST',
        url: 'login/ajax_check_username_availability',
        data: {username_signup: string},
        dataType: 'json'
    });