php - 为什么 Ajax 将 'UNDEFINED' 数据传递给 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();

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