通过AJAX在html文件上提交表单
通过AJAX在html文件上提交表单
提问于 2019-01-22 18:43:41
我已经创建了一个contact.html文件，具有与我们联系的表单。该表单包含姓名、电子邮件和消息字段以及提交按钮。
<section class="module" id="contact" > <!---->
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h2 class="module-title font-alt">Get in touch</h2>
<div class="module-subtitle font-serif"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form id="contactForm" role="form" method="post" action="php/contact.php"> <!---->
<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input class="form-control" type="text" id="name" name="name" placeholder="Your Name*" required="required" data-validation-required-message="Please enter your name."/>
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-control" type="email" id="email" name="email" placeholder="Your Email*" required="required" data-validation-required-message="Please enter your email address."/>
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<textarea class="form-control" rows="7" id="message" name="message" placeholder="Your Message*" required="required" data-validation-required-message="Please enter your message."></textarea>
<p class="help-block text-danger"></p>
</div>
<div class="text-center">
<button class="btn btn-block btn-round btn-d" id="cfsubmit" name ="cfsubmit" type="submit">Submit</button><!---->
</div>
</form>
<div class="ajax-response font-alt" id="contactFormResponse"></div>
</div>
</div>
</div>
</section>这是html文件。在php文件夹中还有一个名为contact.php的php文件，作为html页面的操作。php文件包含一行要发出警报的代码。这是一个测试版本。
联系人表单的JQUERY代码为
$("#contactForm").submit(function (e) {
e.preventDefault();
var $ = jQuery;
var postData = $(this).serializeArray(),
formURL = $(this).attr("action"),
$cfResponse = $('#contactFormResponse'),
$cfsubmit = $("#cfsubmit"),
cfsubmitText = $cfsubmit.text();
alert(cfsubmitText);
$cfsubmit.text("Sending...");
$.ajax(
{
url: formURL,
type: "POST",
data: postData,
success: function (data) {
$cfResponse.html(data);
$cfsubmit.text(cfsubmitText);
$('#contactForm input[name=name]').val('');
$('#contactForm input[name=email]').val('');
$('#contactForm textarea[name=message]').val('');
},
error: function ( data ) {
alert("Error occurd! Please try again");
}
});
return false;
});这段代码不能很好地工作。请给出一个解决方案。
回答 2
Stack Overflow用户
发布于 2019-01-22 19:11:39
使用您的html，我建议您使用btn click提交表单，而不是使用preventDefault的submit方法。我创建了一个fiddle，它应该可以很好地工作，并能满足您的需求。此外，您还需要将btn类型从submit更改为简单button
<button class="btn btn-block btn-round btn-d" id="cfsubmit" name ="cfsubmit" type="button">Submit</button>
$("#cfsubmit").on('click', function (e) {
const $thisBtn = $(this),
$form = $('#contactForm'),
$cfResponse = $('#contactFormResponse'),
formData = $form.serialize();
$thisBtn.text("Sending...");
$.ajax({
url: 'php/contact.php',
type: "POST",
data: formData,
success: function (data) {
$cfResponse.html(data);
$thisBtn.text('Send');
$form.find(':input').val('');
},
error: function ( data ) {
alert("Error occurd! Please try again");
}
});
return false;
});Stack Overflow用户
发布于 2019-01-22 21:19:48
请检查下面的代码，以便jQuery在POST中通过AJAX传递数据。
$(document).ready(function(){
$("#contactForm").submit(function(event){
event.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'php/contact.php',
type: 'POST',
data: formData,
async: false,
success: function(result) {
alert(result);
},
cache: false,
contentType: false,
processData: false
});
});
});请删除Form中的操作属性。
和php/contact.php中的代码检查。
<?php
print_r($_POST);
?>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54306483
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号