我试图使用ajax自动更新mysql数据库,没有单击按钮

时间:2015-11-20 10:04:20

标签: javascript php jquery mysql ajax

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

用于更新的表单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); 
    }
?>

2 个答案:

答案 0 :(得分:2)

下面是我本地工作的更新代码...希望它能帮到你

没有创建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>

答案 1 :(得分:0)

**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>'; }