php - 使用 PHP 和 AJAX 将数据从表单加载到 MySQL

Question

我有一个标准的 HTML 表单，我想将该表单中的数据存储到 MySQL 数据库中。我一切正常，但现在想要实现 AJAX 以防止页面刷新，突然遇到麻烦。

问题:未生成“成功”警报，并且数据未保存到数据库中。

我对 Jquery/AJAX 的接触非常非常少，并且正在不断学习，所以如果我犯了一个基本错误，请容忍我。

*更新1***

这是我的新 AJAX 代码。表单中的数据现在正在保存到数据库中，但仍然没有成功警报。事实上，没有弹出窗口出现。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('form').bind('submit', function(){
                $.ajax({
                    type: 'post',
                    url: "InsertNewMentor.php",
                    data: $("form").serialize(),
                    success: function() {
                        alert("Success!");
                    }
                });
                return false;
            });
        });
    </script>

这是表单(末尾包含 AJAX 代码)。 (更新:不再使用此代码，见上文)

<form>
<table cellpadding="10">

<tr>
<td><b>Chapter:</b></td>
<td><input type="text" name="chapter"></td>
</tr>

<tr>
<td>First Name:</td>
<td><input type="text" name="first"></td>

<td>Last Name:</td>
<td><input type="text" name="last"></td>
</tr>

<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>

<td>Ethnicity:</td>
<td>
<form action="">
<select name="ethnicity">
<option value="white">White/Caucasian</option>
<option value="hispanic">Hispanic</option>
<option value="asian">Asian/Pacific Islander</option>
<option value="native_american">Native American Indian</option>
<option value="other">Other</option>
</form>
</td>
</tr>

<tr>
<td>Year in School</td>
<td>
<form action="">
<select name="year_in_school">
<option value="freshman">Freshman</option>
<option value="sophomore">Sophomore</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</form>
</td>

<td>Phone Number:</td>
<td><input type="text" name="phone"></td>
</tr>

<tr>
<td>Email Address:</td>
<td><input type="text" name="email"></td>

<td>Street Address:</td>
<td>
<input type="text" name="address">
</td>
</tr>

<tr>
<td>Apt/Suite:</td>
<td>
<input type="text" name="suite_num">
</td>

<td>City:</td>
<td>
<input type="text" name="city">
</td>
</tr>

<tr>
<td>State:</td>
<td>
<select name="state">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>

</td>

<td>Zip Code:</td>
<td>
<input type="text" name="zip_code">
</td>
</tr>

<tr>
<td>Cumulutative GPA:</td>
<td><input type="text" name="gpa"></td>

<td>Major/Area of Study:</td>
<td><input type="text" name="major"></td>
</tr>

<tr>
<td>Twitter handle:</td>
<td>
<input type="text" name="twitter_handle">
</td>
</tr>

<tr>
<td colspan="2">
<p>Please describe any relevant teaching experience:</p>
<textarea rows="6" cols="45" name="teaching_experience">
</textarea>
</td>

<td colspan="2">
<p>Why do you want to join Moneythink?</p>
<textarea rows="6" cols="43" name="why_moneythink">
</textarea>
</td>
</tr>

</table>

<table>
<tr>
<td><input type="submit" value="Apply"></td>
<td><input type="reset" value="Clear"></td>
</tr>
</table>

</form>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('form').bind('submit', function(){
                $.ajax({
                    type: 'post',
                    url: "/InsertNewMentor.php",
                    data: $("form").serialize(),
                    success: function() {
                        alert("form was submitted");
                    }
                });
                return false;
            });
        });
    </script>

这是 InsertNewMentor.hp

<?php
$username="";
$password="";
$database="";

$first = $_POST['first'];
$last = $_POST['last'];
$email = $_POST['email'];
$gpa = $_POST['gpa'];
$year = $_POST['year_in_school'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$gender = $_POST['gender'];
$ethnicity = $_POST['ethnicity'];
$year_in_school = $_POST['year_in_school'];
$suite_number = $_POST['suite_num'];
$city = $_POST['city'];
$state = $_POST['state'];
$zip_code = $_POST['zip_code'];
$major = $_POST['major'];
$twitter_handle = $_POST['twitter_handle'];
$why_moneythink = $_POST['why_moneythink'];
$teaching_experience = $_POST['teaching_experience'];
$date = date("m/d/Y");

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

$query = "INSERT INTO students VALUES ('','$address','$phone','$first','$last','$gender', '$ethnicity', '$year_in_school', '$email', '$suite_number','$city','$state','$zip_code','$major','$gpa','$twitter_handle','$why_moneythink','$teaching_experience','pending','$date')";
mysql_query($query);

mysql_close();
?>

Answer 1

首先，serialize() 函数返回一个文本字符串，而不是一个值数组 - 有关详细信息，请阅读 jQuery documentaion.现在进行 ajax 提交 -

  $(function() {
        $('form').bind('submit', function(){
            $.ajax({
                type: 'post',
                url: "/InsertNewMentor.php",
                **data: {dataString:  $("form").serialize()} ,**
                success: function() {
                    alert("form was submitted");
                }
            });
            return false;
        });

您必须发送 JSON 格式的数据，如上所述(请注意数据字段中的更改)

在 PHP 代码中，发布时，您只需发布通过 ajax 发送的字段，即 dataString。此外，在成功函数中您可以使用:

            success: function(result) {
                alert(result);
            }
        });

这样您就可以调试任何错误(如果存在)。祝你好运。