Javascript jquery ajax在地址栏中返回查询字符串
我正在处理一封简单的ajax邮件,我的html如下所示:Javascript jquery ajax在地址栏中返回查询字符串,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在处理一封简单的ajax邮件,我的html如下所示: <form id="contact_form"> <input name="name" id="name" placeholder="[ NAME ]" type="text"> <br /> <input name="company" id="company" placeholder="[ COMPANY ]" type="text"> <br /&g
<form id="contact_form">
<input name="name" id="name" placeholder="[ NAME ]" type="text"> <br />
<input name="company" id="company" placeholder="[ COMPANY ]" type="text"> <br />
<input name="designation" id="designation" placeholder="[ DESIGNATION ]" type="text"> <br />
<input name="phone" id="phone" placeholder="[ PHONE ]" type="text"> <br />
<input name="email" id="email" placeholder="[ EMAIL ]" type="text"> <br />
<textarea name="message" id="message" rows="4" cols="50" style="color:#FFF;" Placeholder="[ HOW CAN WE HELP? ]"></textarea><br />
<input type="submit" id="submit_btn" value="Submit" style="width:262px; height:30px;">
<div id="result" style="background-color:#7A706B; color:#FFF; text-align:center; width:280px; height:250px; position:absolute; left:10px; top:30px; padding-top:100px; display:none; font-size:16px;"> You Expressed. We Understand.<br /><br />[Welcome to the world of business innovation]<br /><br />You’ll be clarified shortly…</div>
</form>
$(function() {
$("#submit_btn").click(function(){
var data = {
name: $("#name").val(),
company: $("#company").val(),
designation: $("#designation").val(),
phone: $("#phone").val(),
email: $("#email").val(),
message: $("#message").val()
};
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "mail.php",
data: data,
cache: false,
success: function(result){
$( "#result" ).fadeIn(1000);
}
});
});
});
问题是,当我单击submit按钮时,它会在地址栏中显示所有数据,而不是通过POST方法将其发送到mail.php
PS:当我使用alert()而不是$(“#result”).fadeIn(1000);它很好用
有人能帮忙吗?
谢谢。添加e.preventDefault();要单击回调,请执行以下操作:
$("#submit_btn").click(function() {
e.preventDefault();
// ...
});
添加e.preventDefault();要单击回调,请执行以下操作:
$("#submit_btn").click(function() {
e.preventDefault();
// ...
});
尝试输入绝对URL,而不是
URL:“mail.php”
。并且返回false代码>在的末尾单击(function(){})代码>回调。尝试输入绝对URL,而不是URL:“mail.php”
。并且返回false代码>在的末尾单击(function(){})代码>回调。您需要取消提交并使用提交事件而不是单击
$(function() {
$("#contact_form").on("submit",function(e){
e.preventDefault(); // will cancel the submit even if errors below
// rest of code
});
});
评注者注意:
提交按钮的有效用例是按enter键将触发提交处理程序。这通常是有用的。如果您不想让enter提交,那么确实要使按钮type=button,并将ajax处理程序分配给单击此按钮而不是提交。您需要取消提交并使用提交事件而不是单击
$(function() {
$("#contact_form").on("submit",function(e){
e.preventDefault(); // will cancel the submit even if errors below
// rest of code
});
});
评注者注意:
提交按钮的有效用例是按enter键将触发提交处理程序。这通常是有用的。如果您不想让enter提交,那么确实要使用button type=button,并将ajax处理程序分配给单击此按钮而不是提交。
- 您必须通过
event.preventDefault()阻止默认操作
- 侦听submit事件而不是click事件
- 使用
.serialize()
方法收集数据
第一点是代码工作所必需的;另外两项是建议
$(function() {
$("#contact_form").on('submit', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "mail.php",
data: $(this).serialize(),
cache: false,
success: function(result){
$( "#result" ).fadeIn(1000);
}
});
});
});
奖金
为了让您了解GET
(默认)和POST
之间的区别,如果您在HTML中只做了以下更改,您将不会在地址栏中看到数据。但是您的表单仍然不会通过ajax提交,因为默认操作仍然有效
<form id="contact_form" method="post">
三点
- 您必须通过
event.preventDefault()阻止默认操作
- 侦听submit事件而不是click事件
- 使用
.serialize()
方法收集数据
第一点是代码工作所必需的;另外两项是建议
$(function() {
$("#contact_form").on('submit', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "mail.php",
data: $(this).serialize(),
cache: false,
success: function(result){
$( "#result" ).fadeIn(1000);
}
});
});
});
奖金
为了让您了解GET
(默认)和POST
之间的区别,如果您在HTML中只做了以下更改,您将不会在地址栏中看到数据。但是您的表单仍然不会通过ajax提交,因为默认操作仍然有效
<form id="contact_form" method="post">
表单没有任何操作提交按钮只调用ajax脚本我不认为这是必要的?是的,这是非常必要的。默认操作是将数据发送到您所在的页面。这正是发生的事情,它将PHP中的任何数据返回到结果中。使用preventDefault()如何防止ajax不发送数据。认为这更像是一个绝对的URL问题。他的ajax被表单的实际提交所打断,因为提交事件没有被取消Hi Edward,这正是我的问题所在,我使用了未使用的表单标记,现在它工作得很好。仅供参考:www.quantumfactual.com是链接。感谢tipThe表单没有任何操作submit按钮只调用ajax脚本我不认为这是必要的?是的,这是非常必要的。默认操作是将数据发送到您所在的页面。这正是发生的事情,它将PHP中的任何数据返回到结果中。使用preventDefault()如何防止ajax不发送数据。认为这更像是一个绝对的URL问题。他的ajax被表单的实际提交所打断,因为提交事件没有被取消Hi Edward,这正是我的问题所在,我使用了未使用的表单标记,现在它工作得很好。仅供参考:www.quantumfactual.com是链接。谢谢你的提示