我知道之前有人问过，我很抱歉。我已经搜索过，无法找到让这个工作的方法。 我试图弄清楚如何在没有页面刷新的情况下提交后在html表单上包含成功消息。 这段代码工作正常并写入数据库，除了添加了我的问题所在的ajax代码。我承认自己对Ajax的知识有限。任何帮助将不胜感激 - 谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style>
/* Honey Pot: */
.robotic { display: none; }
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<!-- <form id="form1" name="form1" method="post" action="result22.php"> -->
<p>
<input name="dealershipname" type="text" id="dealershipname" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Dealership Name" required />
</p>
<p>
<input name="currentlycarry" type="text" id="currentlycarry" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Manufactures You Currently Carry" required />
</p>
<p><label>Which Vehicles are you looking to Carry?</label><br>
<select required="required" name="vehicletype" id="vehicletype" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" />
<option value="">Select</option>
<option value="Vans">Vans</option>
<option value="Pick Up Trucks">Pick Up Trucks</option>
<option value="SUV">SUV</option>
<option value="Cars">Cars</option>
<option value="Combination of Vehicles">Combination of Vehicles</option>
</select>
</p>
<p>
<input name="firstname" type="text" id="firstname" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="First Name" required />
</p>
<p>
<input name="lastname" type="text" id="lastname" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Last Name" required />
</p>
<p>
<input name="streetaddress" type="text" id="streetaddress" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Street Address" required />
</p>
<p>
<input name="city" type="text" id="city" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="City" required />
</p>
<p>
<select required="required" name="state" id="state" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" />
<option value="">Select Your State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</p>
<p>
<input name="zipcode" type="text" id="zipcode" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Zip Code" required />
</p>
<p>
<input name="phone" type="text" id="phone" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Your Phone Number" required />
</p>
<p>
<input name="email" type="text" id="email" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Your Email Address" required />
</p>
<p>
<textarea rows="5" name="additionalinfo" id="additionalinfo" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Additional Information" /></textarea>
</p>
<p class="robotic" id="pot"><input name="robotest" type="text" id="robotest" class="robotest" /></p>
<p>
<input type="submit" name="submit" id="submit" style="background: #ff0000 none repeat scroll 0 0; border: 1px solid #000; border-radius: 10px !important; font-size: 20px; color: #fff; padding: 1px 17px;" value="Send Info!" />
</p>
</form>
<div id="contactResponse"></div>
<script>
$("#form1").submit(function(event)
{
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form1 = $( this ),
$submit = $form1.find( 'submit[type="submit"]' ),
dealershipname_value = $form1.find( 'input[name="dealershipname"]' ).val(),
currentlycarry_value = $form1.find( 'input[name="currentlycarry"]' ).val(),
vehicletype_value = $form1.find( 'input[name="vehicletype"]' ).val(),
firstname_value = $form1.find( 'input[name="firstname"]' ).val(),
lastname_value = $form1.find( 'input[name="lastname"]' ).val(),
streetaddress_value = $form1.find( 'input[name="streetaddress"]' ).val(),
city_value = $form1.find( 'input[name="city"]' ).val(),
state_value = $form1.find( 'input[name="state"]' ).val(),
zipcode_value = $form1.find( 'input[name="zipcode"]' ).val(),
phone_value = $form1.find( 'input[name="phone"]' ).val(),
email_value = $form1.find( 'input[name="email"]' ).val(),
additionalinfo_value = $form1.find( 'textarea[name="additionalinfo"]' ).val(),
url = $form1.attr('action');
/* Send the data using post */
var posting = $.post( url, {
dealershipname: dealershipname_value,
currentlycarry: currentlycarry_value,
vehicletype: vehicletype_value,
firstname: firstname_value,
lastname: lastname_value,
streetaddress: streetaddress_value,
city: city_value,
state: state_value,
zipcode: zipcode_value,
phone: phone_value,
email: email_value,
additionalinfo: additionalinfo_value
});
posting.done(function( data )
{
/* Put the results in a div */
$( "#contactResponse" ).html(data);
});
});
</script>
</body>
</html>
和php代码：
<?php
# ----------------------------------------------------
# ---- result22.php
# ----------------------------------------------------
// Receiving variables from form
@$dfw_ip= $_SERVER['REMOTE_ADDR'];
@$dealershipname = addslashes($_POST['dealershipname']);
@$currentlycarry = addslashes($_POST['currentlycarry']);
@$vehicletype = addslashes($_POST['vehicletype']);
@$firstname = addslashes($_POST['firstname']);
@$lastname = addslashes($_POST['lastname']);
@$streetaddress = addslashes($_POST['streetaddress']);
@$city = addslashes($_POST['city']);
@$state = addslashes($_POST['state']);
@$zipcode = addslashes($_POST['zipcode']);
@$phone = addslashes($_POST['phone']);
@$email = addslashes($_POST['email']);
@$additionalinfo = addslashes($_POST['additionalinfo']);
// @$robotest = addslashes($_POST['robotest']);
// @$xxxx = addslashes($_POST['xxxx']);
// Validation
//Sending Email to form owner
$dfw_header = "From: $email\n"
. "Reply-To: $email\n";
$dfw_subject = "Message from redoform22 form Page";
// $dfw_email_to = "xxxxxxxxxxxx@xxx.com,xxxxxxxxxx@cccccccccc.com";
$dfw_email_to = "root@localhost";
$dfw_message = "Visitor's IP: $dfw_ip\n"
. "Dealership Name: $dealershipname\n"
. "Currently Carry: $currentlycarry\n"
. "Vehicle Type: $vehicletype\n"
. "First Name: $firstname\n"
. "Last Name: $lastname\n"
. "Street Address: $streetaddress\n"
. "City: $city\n"
. "State: $state\n"
. "Zip Code: $zipcode\n"
. "Phone: $phone\n"
. "Email: $email\n"
. "Additional Info: $additionalinfo\n";
// . "robotest: $robotest\n";
@mail($dfw_email_to, $dfw_subject ,$dfw_message ,$dfw_header ) ;
//Sending auto respond Email to visitor
$dfw_header = "From: root@localhost\n"
. "Reply-To: root@localhost\n";
$dfw_subject = "Thank You for contacting redoform22";
$dfw_email_to = "$email";
$dfw_message = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional //EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body> html thank you message to person that filled out the form would go here</body>
</html>";
///////////
$dfw_header .= 'MIME-Version: 1.0' . "\r\n";
$dfw_header .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
@mail($dfw_email_to, $dfw_subject ,$dfw_message ,$dfw_header ) ;
//////////
if ($_POST) {
$robotest = $_POST['robotest'];
if ($robotest) {
$error = "Bad Form."; // formerly robot msg
}
}
//if there was an error, return
if ($error) {
@ob_end_clean(); // clean out buffer, nothing there now
exit($error); // exit, displaying error msg
}
/////////////////
// start connect to the database ||||||||||||||||||||||||||
//include db config file
@require_once 'db_config.php';
// end connect to the database ||||||||||||||||||||||||||
//////////////////////////////////////////////////////////////
// start saving record to the MYSQL database ||||||||||||||||||||||||||
@$dfw_strQuery = "INSERT INTO `redoform22table`(`dealershipname`,`currentlycarry`,`vehicletype`,`firstname`,`lastname`,`streetaddress`,`city`,`state`,`zipcode`,`phone`,`email`,`additionalinfo`)VALUES (\"$dealershipname\",\"$currentlycarry\",\"$vehicletype\",\"$firstname\",\"$lastname\",\"$streetaddress\",\"$city\",\"$state\",\"$zipcode\",\"$phone\",\"$email\",\"$additionalinfo\")" ;
// end saving record to the MYSQL database ||||||||||||||||||||||||||
//////////////////////////////////////////////////////////////
//start yields Update
@$dfw_strQueryUpdate = "UPDATE redoform22table SET `firstname`=\"$firstname\",`lastname`=\"$lastname\",`streetaddress`=\"$streetaddress\",`city`=\"$city\",`state`=\"$state\",`zipcode`=\"$zipcode\",`phone`=\"$phone\",`dealershipname`=\"$dealershipname\",`currentlycarry`=\"$currentlycarry\",`vehicletype`=\"$vehicletype\",`additionalinfo`=\"$additionalinfo\" WHERE (`email`=\"$email\")";
//end yields Update
//////////////////////////////////////////////////////////////
// start check to see if an entry exists for this email ||||||||||||||||||
@$dfw_strQueryEmail = "SELECT email FROM redoform22table WHERE email = \"$email\" ";
//end check to see if an entry exists for this email ||||||||||||||||||
//////////////////////////////////////////////////////////////
//start connect to the DB ||||||||||||||||||||||||||||||||||
$dfw_link = mysql_connect($host, $user, $pw);
if (!$dfw_link) {
die('Could not connect: ' . mysql_error());
}
$dfw_db_selected = mysql_select_db($db, $dfw_link);
if (!$dfw_db_selected) {
die ('Can not use $dfw_db : ' . mysql_error());
}
//end connect to the DB ||||||||||||||||||||||||||||||||||
//////////////////////////////////////////////////////////////
// start see if it should be an update or an insert ||||||||||||||||||||||||
$dfw_result = mysql_query($dfw_strQueryEmail);
if (!$dfw_result) {
die('Invalid query: ' . mysql_error()); //a failure, scram
} else {
//the query worked, verify it's the same as the incoming email
$row1 = mysql_fetch_assoc($dfw_result);
if ($row1["email"] != $email) {
//email doesn't exist, insert new record
$dfw_result = mysql_query($dfw_strQuery); // insert row
if (!$dfw_result) {
die('Invalid query: ' . mysql_error());
}
} else {
//update the existing record
$dfw_result = mysql_query($dfw_strQueryUpdate); // update existing row
if (!$dfw_result) {
die('Invalid query: ' . mysql_error());
}
}
}
//end see if it should be an update or an insert ||||||||||||||||||||||||
///////////////////////////////////////////////////////////////////
ob_end_flush; // send form on to user
mysql_close($dfw_link);
///////////////////////////////////////////////////////////////////
// start send to page if it ran this far
// header("Location: http://example.com/" );
// end send to page if it ran this far
///////////////////////////////////////////////////////////////////
// start OR just echo a message
// echo("<p align='center'><font face='Arial' size='3' color='#FF0000'>cool it sent</font></p>");
// end OR just echo a message
?>
答案 0 :(得分：0)
尝试使用按钮而不是sendInfo的输入标记。并在按钮上添加一个单击事件侦听器以触发您提交的功能。这应该会阻止页面自动刷新。
<button id="submit"> Send Info </button>
$('#submit').on('click',function(event){ //Do your functionality here ..... });
答案 1 :(得分：0)
在您的HTML中没有为您的form1定义任何操作，但在JS部分中，您正在定义url = $form1.attr('action');（这是空的）因此您的帖子将转到空URL。
正如您所说event.preventDefault();，这将不会被调用，您仍然可以将URL写入操作字段。为了兼容性，当用户没有启用JS时，你应该这样做;）
PHP部分的一个旁注：使用预准备语句，永远不要将SQL查询与这样的输入混合在一起。