当我提交表单时,我希望在控制台中对鞋子进行ajax调用,并且页面URL保持不变... 但是采取了表单操作,http调用更改了URL。
<head>
<script src="lib/jquery-1.6.4.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function() {
$( '#myForm' ).submit( function() {
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#resultsDiv').html(response); // update the DIV
}
return false;
});
});
</script>
</head>
<body>
<div id="myFormDiv" >
<form name="myform" id="myform" action="form_handeler.cfm" method="post" >
<input type="text" size="100" name="shoe" value="" /> <input type="submit" name="myFormSubmit" value="submit" />
</form>
</div>
<div id="resultsDiv" >
</div>
</body>
答案 0 :(得分:2)
您应该阻止默认操作发生,即表单提交。
试试这个:
$(document).ready(function() {
$( '#myform' ).submit( function(e){
e.preventDefault();
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#resultsDiv').html(response); // update the DIV
}
//return false; - You dont need the return false here if you are using preventDefault.
});
});
});
答案 1 :(得分:2)
您的代码未与});
正确包含在内,即您的脚本由于});
而导致错误,因此您的脚本未按预期执行,因此会提交默认表单。
$(function() {
$('#myform').submit( function() {
$.ajax({ // create an AJAX call...
...
}); //HERE
return false;
});
});
答案 2 :(得分:2)
如果我们不使用<form>
代码,该怎么办? :d
这是我的解决方案:
HTML:
<input type="text" size="100" id="shoe" value="" />
<input type="submit" onclick="myFormSubmit()" value="submit" />
Javascript:
function myFormSubmit(){
var shoe = $("#shoe").val();
$.ajax({ // create an AJAX call...
data: "shoe="+shoe, // get the form data
type: "POST", // GET or POST
url: "form_handeler.cfm", // the file to call
success: function(response)
{ // on success..
$('#resultsDiv').html(response); // update the DIV
}
});
return false;
}
答案 3 :(得分:1)
脚本中存在语法错误,同时ID为myform
而非myForm
$(document).ready(function () {
$('#myform').submit(function () {
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function (response) { // on success..
$('#resultsDiv').html(response); // update the DIV
}
});
return false;//this was placed within the ajax options
});
});//this was missing
答案 4 :(得分:1)
关闭你的paranthesis:
$(document).ready(function() {
$( '#myform' ).submit( function() {
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#resultsDiv').html(response); // update the DIV
} //ADD THIS TOO
}); //HERE
return false;
});
});
答案 5 :(得分:1)
将其修复为HTML ...
<input type="button" name="myFormSubmit" value="submit" />
这在你的剧本中......
$( '#myFormSubmit' ).click( function(e) {
e.preventDefault();
$.ajax({ // create an AJAX call...
data: $('#myform').serialize(), // get the form data
type: $('#myform).attr('method'), // GET or POST
url: $('#myform).attr('action'), // the file to call
success: function(response) { // on success..
$('#resultsDiv').html(response); // update the DIV
}
return false;
});
});
...但是请注意,如果您打算使用AJAX调用来处理表单的数据,那么确实知道填充所有表单属性的理由。