为什么 Ajax 将“未定义”数据传递给 MySql？

Question

这是我的ajax

$(".submit").click(function(){

    var vp = $("input#vehicle_plate").val();
    var vm = $("input#vehicle_model").val();
    var vt = $("input#vehicle_type").val();
    var da = $("input#date_acquired").val();
    var ad = $("input#assigned_driver").val();
    var dataString = 'vehicle_plate='+ vp + '&vehicle_model='+ vm + '&vehicle_type='+ vt + '&date_acquired='+ da + '&assigned_driver='+ ad;

    $.ajax({
    type: "POST",
    url: "process.php",
    data: dataString,
    success: function(){
    $('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
    }
    });
    return false;

    });

这是我的 PHP，我在其中传递了我的“dataString”

<?PHP
    include("db.classes.php");
    $g = new DB();
    $g->connection();
    if($_POST)
    {
    $vehiclePlate = $g->clean($_POST["vehicle_plate"],1);
    $vehicleModel = $g->clean($_POST["vehicle_model"],1);
    $vehicleType = $g->clean($_POST["vehicle_type"]);
    $assignedDriver = $g->clean($_POST["assigned_driver"],1);
    $ad = date('Y-m-d', strtotime($_POST["datepicker"])); 
            $g->add($vehiclePlate, $vehicleModel, $vehicleType, $assignedDriver, $ad);                                       
    }
        $g->close();
        ?>

这是我的数据库查询

public function add($vehiclePlate, $vehicleModel, $vehicleType, $assignedDriver, $ad)
    {
        $sql = "insert into vehicles(`vehicle_plates`,`DA`,`type`, `model`, `driver`) values('$vehiclePlate', '$ad', '$vehicleType', '$vehicleModel', '$assignedDriver')";

        if(!mysql_query($sql))
        {
            $this->error = mysql_error();
            return true;
        }

        else
        {
            return false;
        }
    }

AJax 返回成功，但是当我尝试查看数据库中的表时，插入的行都是“未定义”，这似乎是什么原因造成的？

编辑：

这是我的 HTML

<div id="rform">
        <form action = "list.php" method="post">
        <fieldset>
                <legend>Fill Up the Form</legend><br>
            <div>
                <label class="label-left">*Vehicle Plate:</label>
                <input class="label-left" type="text" name="vehicle_plate" id="inputbox1" value maxlength="50">
            </div>

            <div>
                <label class="label-left">*Vehicle Type:</label>
                <select class="label-left" id="inputbox" name ="vehicle_type" onchange="document.getElementById('text_content').value=this.options[this.selectedIndex].text">
                    <option value="Motorcycle">Motorcycle</option>
                    <option value="Tricycle">Tricycle</option>
                    <option value="Pick-up">Pick-up</option>
                    <option value="Truck">Truck</option>
                </select><br><br>
            </div>

            <div>
                <label class="label-left">*Vehicle Model:</label>
                <input class="label-left" type="text" name="vehicle_model" id="inputbox" value maxlength="50">
            </div>

            <div>
                <label class="label-left">Date Acquired:</label>
                <input class="label-left" name="date_acquired" id="datepicker" value maxlength="50"><br><br>
            </div>

            <div>
                <label class="label-left">Assigned Driver:</label>
                <input class="label-left" type="text" name="assigned_driver" id="inputbox" value maxlength="50"><br><br>
            </div>

            <div>
                <label class="label-custom" color = red>NOTE: "*" Fields are required</label><br><br>
            </div>
            <span class="error" style="display:none"> Please Enter Valid Data</span>
            <span class="success" style="display:none"> Registration Successfully</span>

            <input id="button" type="submit" value="Add" name = "subBtn" class = "submit"/>

        </fieldset>
        </form>
        </div>

Answer 1

问题出在你的选择器上：

var vp = $("input#vehicle_plate").val();
var vm = $("input#vehicle_model").val();
var vt = $("input#vehicle_type").val();
var da = $("input#date_acquired").val();
var ad = $("input#assigned_driver").val();

您的输入选择器没有任何id 属性，而是您需要通过它们的name 属性来选择它们（或者您可以将id 属性赋予您的html 输入元素，这样您的上述选择器就可以工作）：

var vp = $("input[name=vehicle_plate]").val();
var vm = $("input[name=vehicle_model]").val();
var vt = $("input[name=vehicle_type]").val();
var da = $("input[name=date_acquired]").val();
var ad = $("input[name=assigned_driver]").val();

它将您的值正确传递给服务器。

Answer 2

您正在像 GET 一样连接您的 dataString - 用于通过 URL 传递但在 POST 中不起作用的字符串 - 像这样的请求。

您必须在 javascript-object 中传递您的 POST 数据：

data: { vehicle_plate: vp, vehicle_model: vm, vehicle_type: vt }

...等等。

Answer 3

使用serialize() 更简单，更不容易出错。

$(".submit").click(function () {

    var dataString = $("#rform form").serialize();

    $.ajax({
        type: "POST",
        url: "process.php",
        data: dataString,
        success: function () {
            $('.success').fadeIn(200).show();
            $('.error').fadeOut(200).hide();
        }
    });
    return false;

});