Question

我正在尝试实现一些基本功能，您可以使用权重提交表单，并通过ajax更新我的数据库。

我一直在查看一些已回答的问题以获得指导，但我无法弄清楚为什么下面的代码不起作用。

查看chrome开发人员工具看起来它甚至没有正确提交表单，所以我不认为它的PHP脚本是问题（尽管一旦我解决了第一个问题它可能还有其他问题）。

非常感谢任何帮助解决这个问题。

这是表单和Ajax代码

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

$("#weight_tracker_form").submit(function() {
    $.ajax({
        type: "POST",
        url: "../weight_tracker_process.php",
        data: {
            weight: $("#weight").attr("value"),
        },
        success: function(){
            alert("success");
        },
        error: function(){
            alert("error");
        }
    });
    return false;
});

</script>


<h2>Weight Tracker</h2>

<form id="weight_tracker_form" method="post">
            Date: <input autofocus id="date" name="date" type="date"/>
            Weight: <input id="weight" name="weight" type="text"/> Kg
            <input type="submit" value="Submit Weight">
</form>

这是脚本weight_tracker_process.php

<?php
    // configuration
require("includes/config.php");

    if ($_POST["weight"] == NULL)
    {
        apologize("Please enter an email");
    }

    $weight = mysql_real_escape_string($_POST["weight"]);
    $date = mysql_real_escape_string($_POST["date"]);
    if (query("INSERT INTO weight (user_id, weight_measurement) VALUES (?, ?)",         $_SESSION["id"], $weight); == false){
        echo "Update Error";
    }
    else {
        echo "Success";
    }   

?>

谢谢！

Answer 1

如果这是您的确切代码，那么可能发生的事情是处理程序未附加到form元素。 JavaScript代码位于form之前，因此当它运行时，form尚不存在。所以这个选择器返回一个空数组：

$("#weight_tracker_form")

在分配事件处理程序之前，您需要等到DOM完成加载：

$(function () {
    $("#weight_tracker_form").submit(function() {
        $.ajax({
            type: "POST",
            url: "../weight_tracker_process.php",
            data: {
                weight: $("#weight").attr("value"),
            },
            success: function(){
                alert("success");
            },
            error: function(){
                alert("error");
            }
        });
        return false;
    });
});

将它包装在像这样的jQuery函数中会导致它等到文档的ready事件触发。

Answer 2

尝试切换它：

weight: $("#weight").attr("value");

为此：

weight: $("#weight").val();

另外，您将代码放在document.ready中。像这样：

$(document).ready(function({
        $("#weight_tracker_form").submit(function() {
        $.ajax({
            type: "POST",
            url: "../weight_tracker_process.php",
            data: {
                weight: $("#weight").attr("value"),
            },
            success: function(){
                alert("success");
            },
            error: function(){
                alert("error");
            }
        });
        return false;
    });
}));

Answer 3

谢谢大家，最初的问题就像你建议我忘记在执行脚本之前等待dom加载。第二个问题是脚本中的一些小括号和语法错误。

最终代码在

之下

HTML / Jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#weight_tracker_form").submit(function() {
        $.ajax({
            type: "POST",
            url: "weight_tracker_process.php",
            data: {
                weight: $("#weight").val()
            },
            success: function(){
                alert("success");
            },
            error: function(){
                alert("error");
            }
        });
        return false;
    });
});

</script>


<h2>Weight Tracker</h2>

<form id="weight_tracker_form" method="post">
            Date: <input autofocus id="date" name="date" type="date"/>
            Weight: <input id="weight" name="weight" type="text"/> Kg
            <input type="submit" value="Submit Weight">
</form>

<a href="logout.php">Log Out</a>

PHP

<?php
    // configuration
require("includes/config.php");

// if form was submitted
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
    if ($_POST["weight"] == NULL)
    {
        echo "Error";
    }

    $weight = mysql_real_escape_string($_POST["weight"]);
    if (query("INSERT INTO weight (user_id, weight_measurement) VALUES(?, ?)", $_SESSION["id"], $weight) == false){
        echo "Update Error";
    }
    else {
        echo "Success";
    }   
}  
else
{
    // else render form
    printf("error");
}
?>

Answer 4

我还建议使用jQuery.serialize（）方法将broser中的所有字段发布到服务器。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#weight_tracker_form").submit(function() {
        $.ajax({
            type: "POST",
            url: "../weight_tracker_process.php",
            data: $("#weight_tracker_form").serialize(),
            success: function(){
                alert("success");
            },
            error: function(){
                alert("error");
            }
        });
        debugger;
        return false;
    });
});
</script>

</head>
<body>
    <h2>Weight Tracker</h2>

    <form id="weight_tracker_form" method="post">
                Date: <input autofocus id="date" name="date" type="date"/>
                Weight: <input id="weight" name="weight" type="text"/> Kg
                <input type="submit" value="Submit Weight">
    </form>
</body>
</html>

试图通过AJAX和Jquery更新数据库

4 个答案: