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);
            }
        });

所以你可以调试任何错误，如果存在的话。祝你好运。

Answer 2

 <form id="formPost" method="POST">
 <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>

 <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>

 </td>
 </tr>

 <tr>
 <td>Year in School</td>
 <td>

 <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>

 </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>
 .....
 </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: $("#formPost").serialize(),
                success: function() {
                    alert("form was submitted");
                }
            });
            return false;
        });
    });
</script>

试试这个

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

2 个答案: