javascript 使用 jQuery 和 Ajax 提交不刷新页面的表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25201312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit a Form without Refreshing page with jQuery and Ajax
提问by Gaurav Manral
I am trying to do something like this example-
我正在尝试做类似这个例子的事情-
My form.html-
我的form.html——
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$("#Submit").click(function(e) {
e.preventDefault();
var contacttype = $("#contacttype").val();
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;
if(name=='' || email=='' || phone=='' || comment=='' || contacttype=='Select')
{
$('.success').fadeOut(200).hide();
$('.error').fadeIn(200).show();
}
else
{
$.ajax({
type: "POST",
url: "contact.php",
data: dataString,
success: function(){alert("GSM");
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
</head>
<body>
<form action="" method="post" id="contact_form">
<select id="contacttype" name="contactform">
<option selected="selected" value="Select">Select</option>
<option value="Franchisee">Franchisee</option>
<option value="Enquiry">Enquiry</option>
<option value="Feedback">Feedback</option>
<option value="Complaint">Complaint</option>
</select><br>
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="email" placeholder="Email"><br>
<input type="text" name="phone" placeholder="Phone"><br>
<textarea name="comment" placeholder="Comment"></textarea><br>
<input type="submit" name="submit" id="Submit" >
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</form>
</body></html>
But code url: "contact.php",does not seem to work, as my database is not updated.
但是代码url: "contact.php",似乎不起作用，因为我的数据库没有更新。
contact.php file is as follows -
contact.php 文件如下——
<?php include("connect.php");
if($_POST)
{
alert("1");
$contacttype=$_POST['contacttype'];
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['comment'];
$comment=$_POST['comment'];
mysql_query("insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ($contacttype,$name,$email,$phone,$comment)");
}
else
{
alert("2");
}
?>
Can anybody help me out. I need to update my database without refreshing my html page.
任何人都可以帮助我。我需要更新我的数据库而不刷新我的 html 页面。
回答by Anoop
your AJAX code seems fine. please correct:
你的 AJAX 代码看起来不错。请纠正：
$contacttype=$_POST['contacttype'];
into:
进入：
$contacttype=$_POST['contactform'];
回答by Tanvir Hasan
"contacttype" field missing in ajax post
ajax 帖子中缺少“contacttype”字段
var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment+'& contacttype=' + contacttype
;
;
missing "id" attribute in these fields
这些字段中缺少“id”属性
<input type="text" name="name" placeholder="Name" id='name'><br>
<input type="text" name="email" placeholder="Email" id='email'><br>
<input type="text" name="phone" placeholder="Phone" id='phone'><br>
<textarea name="comment" placeholder="Comment" id='comment'></textarea><br>
May be type, name, email, phone, commentsql field datatype is varchar
可能是type, name, email, phone, commentsql 字段数据类型是 varchar
mysql_query("insert into `contact_form`
(`type`, `name`, `email`, `phone`, `comment`)
VALUES ('$contacttype','$name','$email','$phone','$comment')");
if " phone " datatype is INT u can use
('$contacttype','$name','$email',$phone,'$comment')
回答by Gaurav Manral
Thanks for the suggestions from all of you. I found the solution. It was a mix up of some silly mistakes and some wrong SQL syntax.
谢谢大家的建议。我找到了解决方案。它混合了一些愚蠢的错误和一些错误的 SQL 语法。
My final correct code is like this -
我最终正确的代码是这样的 -
form.html-
form.html——
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#Submit").click(function(e) {
e.preventDefault();
var contacttype = $("#contacttype").val();
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;
if(name=='' || email=='' || phone=='' || comment=='' || contacttype=='Select')
{
$('.success').fadeOut(200).hide();
$('.error').fadeIn(200).show();
}
else
{
$.ajax({
type: "POST",
url: "contact.php",
success: function(){
$('#form').fadeOut(200).hide();
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
</head>
<body>
<form action="contact.php" method="post" id="contact_form">
<select id="contacttype" name="contacttype">
<option selected="selected" value="Select">Select*</option>
<option value="Franchisee">Franchisee</option>
<option value="Enquiry">Enquiry</option>
<option value="Feedback">Feedback</option>
<option value="Complaint">Complaint</option>
</select><br>
<input type="text" id="name" name="name" placeholder="Name*"><br>
<input type="text" id="email" name="email" placeholder="Email*"><br>
<input type="text" id="phone" name="phone" placeholder="Phone*"><br>
<textarea name="comment" placeholder="Comment*"></textarea><br>
<input type="submit" name="submit" id="Submit" >
</form>
</body></html>
contact.php
contact.php
if($_POST)
{
$contacttype=$_POST['contacttype'];
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$comment=$_POST['comment'];
mysqli_query($connection,"insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ('$contacttype','$name','$email','$phone','$comment')");
echo "insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ('$contacttype','$name','$email','$phone','$comment')";
}
else
{
}
?>
回答by Ashish
add contacttype to datastring
将联系人类型添加到数据字符串
var dataString = 'contacttype='+ contacttype +'& name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;
also you have missed to include id to the input boxes eg:
您也错过了在输入框中包含 id 的内容，例如：
<input type="text" name="name" id="name" placeholder="Name">
and also dont alert inside php tag.just echo the result and catch it in the javascript eg:
并且不要在 php 标签中发出警报。只需回显结果并在 javascript 中捕获它，例如：
<?php include("connect.php");
if($_POST)
{
$contacttype=$_POST['contacttype'];
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['comment'];
$comment=$_POST['comment'];
mysql_query("insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ($contacttype,$name,$email,$phone,$comment)");
echo $name;
}
else
{
echo("not");
}
?>
javascript
javascript
$.ajax({
type: "POST",
url: "contact.php",
data: dataString,
success: function(data){
alert(data);
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
回答by HDT
$("#contact_form").submit(){
var contacttype = $("#contacttype").val();
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;
if(name=='' || email=='' || phone=='' || comment=='' || contacttype=='Select')
{
$('.success').fadeOut(200).hide();
$('.error').fadeIn(200).show();
}
else
{
$.ajax({
type: "POST",
url: "contact.php",
data: dataString,
success: function(){alert("GSM");
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
