我正在从flowplayer overlay加载外部页面,我试图通过ajax在该页面中提交表单,并重新加载页面。
当我直接浏览文件时,它可以正常工作,但是当它在叠加层中时,会在提交时重新加载页面。
是否有任何配置它将加载jquery文件并通过ajax提交?
感谢
这是代码
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
$(function(){
$("#JqAjaxForm").submit(function(){
dataString = $("#JqAjaxForm").serialize();
$.ajax({
type: "POST",
url: "mailto_friend.cfm",
data: dataString,
dataType: "json",
success: function(data) {
if(data.email_check == "invalid"){
$("#message_ajax").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
} else {
$("#message_ajax").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
}
}
});
return false;
});
});
</script>
</head>
<body>
<form id="JqAjaxForm">
<fieldset>
<legend>jQuery.ajax Form Submit</legend>
<p><label for="name_ajax">Name:</label><br />
<input id="name_ajax" type="text" name="name_ajax" /></p>
<p><label for="email_ajax">E-mail:</label><br />
<input id="email_ajax" type="text" name="email_ajax" /></p>
<p> <input type="submit" value="Submit" /></p>
</fieldset>
</form>
<div id="message_ajax"></div>
</body>
</html>
这是确切的代码,它具有就绪功能
<div id="result">
<form id="testForm" >my data
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#testForm").submit(sendForm)
});
function sendForm() {
$.post('mypage.cfm',$("#testForm").serialize(),function(data,status){
$("#result").html(data);
return false;
});
return false;
}
</script>
答案 0 :(得分:1)
这似乎是由于在HTML准备好之前调用了jQuery代码引起的。
如果将脚本移动到HTML文件的底部,它将正常工作。
或者,您可以使用jQuery .ready() method来延迟执行。
<html>
<head>
</head>
<body>
<form id="JqAjaxForm">
<!-- your form -->
</form>
<div id="message_ajax"></div>
<!-- javascript should be loaded at the bottom of the page for best results -->
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
$(function(){
$("#JqAjaxForm").submit(function(){
// your script code
return false;
});
});
</script>
</body>
</html>
更新:我将所有javascript包装在文档就绪函数中,以便延迟执行直到DOM准备就绪。没有mailto_friend.cfm文件,我无法进一步测试。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="result">
<form id="testForm">
From: <input type="text" name="from"><br/>
To: <input type="text" name="to"><br/>
Message: <input type="text" name="message"><br/>
<input type="submit" name="send" value="Save" />
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#testForm").submit(sendForm);
function sendForm() {
$.post('mailto_friend.cfm',
$("#testForm").serialize(),
function(data,status){
$("#result").html(data);
});
alert("I am working");
return false;
}
});
</script>
</body>
</html>