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

Question

My database is not updating dynamically. Am I missing something? It was working before removing some field names and also it was updating the user records automatically. But now it seems some issue in updating dynamically.

Form javascript used for updating

<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>

update php used

<?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

below is the updated code working on my local...hope it will help you

did it without creating jquery plugin

<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>

Answer 2

**Here’s the code example of a POST method call and AJAX database update –**
<div id="c">
<input id="text1" type="text" name="text1" /> 
<input id="submit" type="submit" name="submit" value="SAVE IT" />
</div>
<div id="cn">
</div>``

**Now we declare the JQuery code to make a POST call**
<script type="text/javascript">
$(document).ready(function () { 
$('#submit').click(function(){
var ths = this;
var str = $(ths).siblings("#text1").val();
$.post("saveData.php", {t:str}, function(value){
$(ths).parent("#c").fadeOut("fast");
$(ths).parent("#c").siblings("#cn").html(value);
});
});
});
</script>

**This code block receive value and update database**
$t = $_POST['t'];

$link = mysql_connect(servername, username, password);
if (!$link) {
die('Could not connect: ' . mysql_error());
}
$db_selected = mysql_select_db(databasename, $link);

// Insert the data
$query2="INSERT INTO p_a_j(scrap) VALUES('$t')";
$results2 = mysql_query($query2, $link)
or die(mysql_error());

if(mysql_affected_rows()&gt;=1){
echo '<span>You entered'.$t.'</span>'.
'Database updated'.
'<a href="index.html">Try this again</a>'; }