onclick表单通过ajax发送没有页面刷新
我一直在绞尽脑汁看了几天的例子并尝试了不同的东西来尝试让我的表单在没有页面刷新的情况下使用Ajax提交。 它现在甚至没有发送数据..我不知道我做错了什么..可以通过我的ajax和forms请一个人。
Toid是用户ID,newmsg是用户提交的文本。 这两个值将被发送到insert.php页面。
我真的会帮助你。 我是Ajax的新手,我看一下它并没有任何线索。 如果我终于开始工作,它可能会帮助我意识到我做错了什么。 我正在查找教程和观看video……但对于那些熟悉此处的人来说,这可能非常耗时。 也许我对ajax有错误的想法,根本就没有意义,抱歉。
$(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; });
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']);
尝试使用firebug识别代码中的错误。 这是开发javascript的一个非常好的伴侣。 几乎所有的bug都会在firebug控制台中导致错误消息。
您的代码中有几个错误,这是更正的版本:
$(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');} }); }); });
在这里纠正的HTML:
将表单更改为此
您不需要提交按钮上的onsubmit
属性,而是需要在表单元素上
homestatus可能超出范围
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(){ } }); }
这没有经过测试,但试试这个(我用注释注释了一些东西)
让.serialize()
完成序列化表单数据的工作要容易.serialize()
。
提交处理程序还需要将event
作为forms参数,否则将抛出错误(事件将是未定义的)。
通过一些其他更改,以下是整个事情:
实际上onsubmit event
必须与form
一起使用而不是
它可能是
并从函数/处理程序返回true
或false
,即
function homestatus() { //... if(condition==true) return true; else return false; }
由于您使用的是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 } }); });
在这种情况下,您的表格应如下所示
和input
字段应具有有效的type
和value
属性, Html表单和输入 。
我想你应该阅读更多关于jQuery
。
参考: jQuery val和jQuery Ajax 。
除非你省略了一些代码,否则问题是这一行:
homestatus()
您从未定义此函数,因此提交会引发错误。
您可能需要查看jQuery( http://www.jquery.com )或其他js框架。 这样的框架完成了您通常必须手工完成的大部分工作。 还有一堆很好的辅助函数用于发送表单数据或修改html元素