0

我试图实现一些基本的东西，你提交一个带有权重的表单，它通过 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";
    }   

?>

谢谢！

4

4 回答 4

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 函数中会导致它等待文档的就绪事件触发。

于 2013-09-21T23:06:12.577 回答
0

尝试切换这个：

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;
    });
}));
于 2013-09-21T23:11:26.730 回答
0

谢谢大家，最初的问题是你建议我在执行脚本之前忘记等待 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");
}
?>
于 2013-09-24T21:28:21.177 回答
0

我还建议使用 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>
于 2013-09-24T22:01:09.487 回答