javascript - 我正在尝试使用 ajax 自动更新 mysql 数据库，并且没有单击按钮

Question

我的数据库没有动态更新。我错过了什么吗？它在删除一些字段名称之前正在工作，并且它正在自动更新用户记录。但现在动态更新似乎有些问题。

用于更新的表单 JavaScript

<script type="text/javascript">
    // JQUERY: Plugin "autoSumbit"
    (function($) {
        $.fn.autoSubmit = function(options) {
            return $.each(this, function() {
                // VARIABLES: Input-specific
                var input = $(this);
                var column = input.attr('name');

                // VARIABLES: Form-specific
                var form = input.parents('form');
                var method = form.attr('method');
                var action = form.attr('action');

                // VARIABLES: Where to update in database
                var where_val = form.find('#where').val();
                var where_col = form.find('#where').attr('name');

                // ONBLUR: Dynamic value send through Ajax
                input.bind('blur', function(event) {
                    // Get latest value
                    var value = input.val();
                    // AJAX: Send values
                    $.ajax({
                        url: action,
                        type: method,
                        data: {
                            val: value,
                            col: column,
                            w_col: where_col,
                            w_val: where_val
                        },
                        cache: false,
                        timeout: 10000,
                        success: function(data) {
                            // Alert if update failed
                            if (data) {
                                alert(data);
                            } else { // Load output into a P
                                $('#notice').text('Updated');
                                $('#notice').fadeOut().fadeIn();
                            }
                        }
                    });
                    // Prevent normal submission of form
                    return false;
                })
            });
        }
    })(jQuery);
    // JQUERY: Run .autoSubmit() on all INPUT fields within form
    $(function(){
        $('#ajax-form INPUT').autoSubmit();
    });
</script>

<script type="text/javascript" src="materialise/js/jquery-1.8.0.min.js"></script>

<form id="ajax-form" class="autosubmit" method="POST" action="./php_parsers/ajax-update.php">
    <div class="row">
        <div class="input-field col s8">
            <i class="mdi-editor-mode-edit prefix"></i>
            <input type="text" name="firstname" >
            <label for="firstname">Firstname: * <?php echo $firstname; ?></label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s8">
            <i class="mdi-editor-border-color prefix"></i>
            <input type="text"  name="lastname" value="<?php echo $lastname; ?>">
            <label for="lastname">Lastname: *</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s8">
            <i class="mdi-action-accessibility prefix"></i>
            <input type="date"  name="age" class="datepicker validate">
            <label for="age">D.o.B *</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s8">
            <i class="mdi-editor-mode-edit prefix"></i>
            <label for="gender"><?php echo $sex; ?></label>
        </div>
    </div>
    <input id="where" type="hidden" name="<?php echo $uname; ?>" value="<?php echo $uname; ?>" />
</form>

更新使用的 php

<?php
    // DATABASE: Connection variables
    include_once("../php_includes/check_login_status.php");
    // DATABASE: Clean data before use
    function clean($value) {
        global $db_conx;
        $value = preg_replace('#[^a-z0-9. ]#i', '', $value);
        $value = mysqli_real_escape_string($db_conx, $value);
        return $value;
    }
    // FORM: Variables were posted
    if (count($_POST)) {
        // Prepare form variables for database
        foreach($_POST as $column => $value)
            ${$column} = clean($value);
        // Perform MySQL UPDATE
        $result = "UPDATE users SET ".$col."='".$val."' WHERE username='$log_username' LIMIT 1";
        $query = mysqli_query($db_conx, $result); 
    }
?>

Answer 1

下面是在我本地运行的更新代码...希望它会对您有所帮助

没有创建jquery插件就做到了

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

$( document ).ready(function() {
    $('input').blur(function() {
                var input = $(this);
                var column = input.attr('name');

                // VARIABLES: Form-specific
                var form = input.parents('form');
                var method = form.attr('method');
                var action = form.attr('action');

                // VARIABLES: Where to update in database
                var where_val = form.find('#where').val();
                var where_col = form.find('#where').attr('name');

                var value = input.val();
                    // AJAX: Send values
                    $.ajax({
                        url: action,
                        type: method,
                        data: {
                            val: value,
                            col: column,
                            w_col: where_col,
                            w_val: where_val
                        },
                        cache: false,
                        timeout: 10000,
                        success: function(data) {
                            // Alert if update failed
                            if (data) {
                                alert(data);
                            } else { // Load output into a P
                                $('#notice').text('Updated');
                                $('#notice').fadeOut().fadeIn();
                            }
                        }
                    });
    });
});


</script>
</head>

<body>

<form id="ajax-form" class="autosubmit" method="POST" action="./php_parsers/ajax-update.php">
    <div class="row">
        <div class="input-field col s8">
            <i class="mdi-editor-mode-edit prefix"></i>
            <input type="text" name="firstname" value="<?php echo $firstname; ?>">
            <label for="firstname">Firstname: * </label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s8">
            <i class="mdi-editor-border-color prefix"></i>
            <input type="text"  name="lastname" value="<?php echo $lastname; ?>">
            <label for="lastname">Lastname: *</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s8">
            <i class="mdi-action-accessibility prefix"></i>
            <input type="date"  name="age" class="datepicker validate">
            <label for="age">D.o.B *</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s8">
            <i class="mdi-editor-mode-edit prefix"></i>
            <label for="gender"><?php echo $sex; ?></label>
        </div>
    </div>
    <input id="where" type="hidden" name="<?php echo $uname; ?>" value="<?php echo $uname; ?>" />
</form>
</body>
</html>