php onclick表单通过ajax发送没有页面刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11588507/
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
onclick form send via ajax no page refresh
提问by dave
I've been racking my brains for days looking at examples and trying out different things to try and get my form to submit with Ajax without a page refresh. And Its not even sending the data now.. I don't know what I'm doing wrong..Can someone run through my ajax and form please.
几天来，我一直在绞尽脑汁查看示例并尝试不同的方法来尝试让我的表单使用 Ajax 提交而无需刷新页面。它现在甚至没有发送数据..我不知道我做错了什么..有人可以浏览我的ajax和表格吗？
Toid is the users id and newmsg is the text in which the user submits. The two values get sent to the insert.php page.
Toid 是用户 ID，newmsg 是用户提交的文本。这两个值被发送到 insert.php 页面。
I would really appreate the help. I'm new to Ajax, and I look at some of it and don't have a clue. If I finally got it working, It may help me realize what I've done wrong. I am looking up tutorials and watching videos..but it can be very time consuming for something that would be simple to someone in the know on here. It maybe that I've got the wrong idea on the ajax and it makes no sense at all, sorry about that.
我真的很感激你的帮助。我是 Ajax 的新手，我查看了其中的一些内容却没有任何线索。如果我最终让它工作，它可能会帮助我意识到我做错了什么。我正在查找教程和观看视频......但是对于这里的知情人来说很简单的事情可能非常耗时。也许我对 ajax 有错误的想法，这完全没有意义，对此我很抱歉。
<script type="text/javascript">
$(document).ready(function(){
$("form#myform").submit(function() {
homestatus()
event.preventDefault();
var toid = $("#toid").attr("toid");
var content = $("#newmsg").attr("content");
$.ajax({
type: "POST",
url: "insert.php",
data: "toid="+content+"&newmsg="+ newmsg,
success: function(){
}
});
});
return false;
});
</script>
<form id="myform" method="POST" class="form_statusinput">
<input type="hidden" name="toid" id="toid" value="<?php echo $user1_id ?>">
<input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
<div id="button_block">
<input type="submit" id="button" value="Feed" onsubmit="homestatus(); return false" >
</div>
</form>
INSERT.PHP
插入文件
$user1_id=$_SESSION['id'];
if(isset($_POST['toid'])){
if($_POST['toid']==""){$_POST['toid']=$_SESSION['id'];}
if(isset($_POST['newmsg'])&isset($_POST['toid'])){
if($_POST['toid']==$_SESSION['id']){
rawfeeds_user_core::create_streamitem("1",$_SESSION['id'],$_POST['newmsg'],"1",$_POST['toid']);
}else{
rawfeeds_user_core::create_streamitem("3",$_SESSION['id'],$_POST['newmsg'],"1",$_POST['toid']);
回答by stefreak
Try using firebug to identify bugs in your code. It's a really good companion for developing javascript. Nearly all of your bugs led to error messages in the firebug console.
尝试使用 firebug 来识别代码中的错误。它是开发 javascript 的好伙伴。几乎所有的错误都会导致 firebug 控制台中的错误消息。
You had several errors in your code, here is the corrected version:
您的代码中有几个错误，这是更正后的版本：
$(document).ready(function(){
$("form#myform").submit(function(event) {
event.preventDefault();
var toid = $("#toid").val();
var newmsg = $("#newmsg").val();
$.ajax({
type: "POST",
url: "insert.php",
data: "toid=" + content + "&newmsg=" + newmsg,
success: function(){alert('success');}
});
});
});
And here the corrected html:
这里是更正的 html：
<form id="myform" method="POST" class="form_statusinput">
<input type="hidden" name="toid" id="toid" value="<?php echo $user1_id; ?>">
<input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
<div id="button_block">
<input type="submit" id="button" value="Feed">
</div>
</form>
回答by The Alpha
Actually onsubmit eventhas to be used with formso instead of
实际上onsubmit event必须与formso一起使用，而不是
<input type="submit" id="button" value="Feed" onsubmit="homestatus(); return false" >
it could be
它可能是
<form id="myform" method="POST" class="form_statusinput" onsubmit="homestatus();">
and return the trueor falsefrom the function/handler, i.e.
并从函数/处理程序返回true或false，即
function homestatus()
{
//...
if(condition==true) return true;
else return false;
}
Since you are using jQueryit's better to use as follows
既然你正在使用jQuery，最好使用如下
$("form#myform").on('submit', function(event){
event.preventDefault();
var toid = $("#toid").val(); // get value
var content = $("#newmsg").val(); // get value
$.ajax({
type: "POST",
url: "insert.php",
data: "toid=" + toid + "&newmsg=" + content,
success: function(data){
// do something with data
}
});
});
In this case your form should be as follows
在这种情况下，您的表格应如下所示
<form id="myform" method="POST" class="form_statusinput">
...
</form>
and inputfields should have a valid typeand valueattribute, Html form and Input.
和input字段应该有一个有效的type和value属性、Html 表单和 Input。
I think you should read more about jQuery.
我认为你应该阅读更多关于jQuery.
Reference :jQuery valand jQuery Ajax.
回答by Beetroot-Beetroot
It's a lot easier to let .serialize()do the work of serializing the form data.
让.serialize()序列化表单数据的工作容易得多。
The submit handler also needs eventas a formal parameter, otherwise an error will be thrown (event will be undefined).
提交处理程序也需要event作为形式参数，否则将抛出错误（事件将未定义）。
With a few other changes, here is the whole thing:
通过其他一些更改，这里是整个事情：
<script type="text/javascript">
$(document).ready(function(){
$("form#myform").submit(function(event) {
event.preventDefault();
homestatus();
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: "insert.php",
data: formData,
success: function(data) {
//...
}
});
});
});
</script>
<form id="myform" class="form_statusinput">
<input type="hidden" name="toid" id="toid" value="<?php echo $user1_id ?>">
<input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
<div id="button_block">
<input type="submit" id="button" value="Feed" >
</div>
</form>
回答by Ibu
change the form to this
把表格改成这样
<form id="myform" ... onsubmit="homestatus(); return false">
you don't need the onsubmitattribute on the submit button, but on the form element instead
您不需要onsubmit提交按钮上的属性，而是需要表单元素上的属性
homestatus might be out of scope
家庭状态可能超出范围
function homestatus () {
var toid = $("#toid").attr("toid");
var content = $("#newmsg").attr("content");
$.ajax({
type: "POST",
url: "insert.php",
data: "toid="+content+"&newmsg="+ newmsg,
success: function(){
}
});
}
回答by JeremyWeir
This isn't tested, but try this (I annotated some stuff using comments)
这没有经过测试，但试试这个（我用评论注释了一些东西）
<script type="text/javascript">
$(document).ready(function(){
$("form#myform").submit(function(event) {
// not sure what this does, so let's take it out of the equation for now, it may be causing errors
//homestatus()
// needed to declare event as a param to the callback function
event.preventDefault();
// I think you want the value of these fields
var toid = $("#toid").val();
var content = $("#newmsg").val();
$.ajax({
type: "POST",
url: "insert.php",
data: "toid="+toid +"&newmsg="+ content,
success: function(){
}
});
return false;
});
});
</script>
<form id="myform" method="POST" class="form_statusinput">
<input type="hidden" name="toid" id="toid" value="<?php echo $user1_id ?>">
<input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
<div id="button_block">
<input type="submit" id="button" value="Feed" / >
</div>
</form>
回答by twiz
Unless you are omitting some of your code, the problem is this line:
除非您省略了一些代码，否则问题在于这一行：
homestatus()
You never defined this function, so the submit throws an error.
您从未定义过此函数，因此提交会引发错误。
回答by Sascha Ludwig
You may want to take a look at jQuery (www.jquery.com) or another js framework. Such frameworks do most of the stuff you normally have to do by hand. There are also a bunch of nice helper functions for sending form data or modifying html elements
您可能想看看 jQuery ( www.jquery.com) 或其他 js 框架。此类框架可以完成您通常必须手动完成的大部分工作。还有一堆很好的辅助函数用于发送表单数据或修改 html 元素
