jquery ajax 返回地址栏中的查询字符串
jquery ajax returning query string in address bar
我正在处理一个简单的 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 />
<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>
我的jquery看起来像这样:
$(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);
}
});
});
});
问题是当我单击"提交"按钮时,它会在地址栏中显示所有数据.php而不是通过POST方法将其发送到邮件。
PS:当我使用 alert() 而不是 $( "#result" ).fadeIn(1000) 时;它工作正常。
有人可以帮忙吗?谢谢。
您需要取消提交并使用提交事件而不是单击
$(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 处理程序分配给单击此按钮而不是提交。
添加 e.preventDefault(); 到您的点击回调:
$("#submit_btn").click(function() {
e.preventDefault();
// ...
});
尝试输入绝对 URL 而不是 url: "mail.php"
. 并在click(function(){});
回调结束时return false;
。
三分
-
您必须通过
event.preventDefault()
阻止默认操作 - 侦听提交事件而不是单击事件
- 使用
.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">
相关文章:
- 如何有效地将游戏数据存储在URL查询字符串中
- 从查询字符串参数推断出正确的数据类型
- AngularJS:获取链接中没有哈希的查询字符串值
- AngularJS,如何更改查询字符串
- 如何将activeadmin查询字符串传递给batch_action
- 如何从查询字符串中的输入字段发回文本
- Django在使用AJAX时没有接收到新的查询字符串
- 使用查询字符串方法清除浏览器缓存
- 用于刷新的Javascript更改查询字符串
- 我想将查询字符串变量添加到JSON名称/值对中
- 将查询字符串值从页面传递 asp.net 到 iframe
- jqueryajax生成查询字符串,如果未定义则不通过
- 如何将查询字符串传递到HTML框架
- AngularJs将查询字符串发布到c#控制器
- Jquery - 从查询字符串中获取“#”值之后,而不是在“?”符号值之后获取
- 在 JavaScript 中将查询字符串传递给 Web 服务 (ASP.NET)
- 在查询字符串中查找 where 子句
- POST encodeURI查询字符串内部服务器错误 500
- JavaScript:从具有使用 # 符号的路由的 URL 获取查询字符串
- 更改链接 URL 中的路径名,同时保持查询字符串不变