PHP Ajax调用导航到表单提交的动作页面
PHP Ajax Call Navigating to Action Page on Form Submit
在我的php代码中有这个ajax调用,它仍然导航到操作页面。我希望ajax调用保持在同一页面上,只更新页面的一部分。我哪里做错了:
<form method="post" id="holderSave" action="student_add_scene.php">
<h3> Save to Holder</h3><br/>
<div id="cutfrom">
<input placeholder="Cut from" name="from" id="from">
<button href="#" onclick="captureElapsed('elapseFrom', 'from');
return false;">capture</button>
</div>
<div id="cutto">
<input placeholder="Cut to" name="to" id="to" >
<button href="#" onclick="captureElapsed('elapseTo', 'to');
return false">capture</button>
</div>
<div id="savecapt">
<input placeholder="add label" id="label" name="label"/>
<input type='submit' value='Save' class='button'>
</div>
</form>
<script>
$('#holderSave').on("submit", (function (e) { // catch the form's submit event
e.preventDefault();
$.ajax({// create an AJAX call...
var $form = $(this), url = $form.attr('action');
var posting = $.post( url, { from: $('#from').val(), label:$('#label').val(), to: $('#to').val()});
posting.done(function(response)){
$('#holderSave').html(response); // update the DIV
alert(response);
}
});
return false;
}));
</script>
语法错误:
$.ajax({// create an AJAX call... var $form = $(this), url = $form.attr('action');
您似乎试图将传递给ajax
的对象字面量视为函数体。它不是,所以你不能在里面写语句。
由于您稍后使用$.post
发出ajax请求,因此$.ajax
完全没有意义。把那行删掉就行了。
固定代码。除了对.ajax的无意义的半调用之外,您还有一堆语法错误,我在重新格式化时已经修复了这些错误。
使用浏览器的开发工具控制台。使用http://jshint.com/
// Remove pointless ( from before the second argument of the call to on().
$('#holderSave').on("submit", function(e) {
e.preventDefault();
// Remove half a call to .ajax
var $form = $(this),
url = $form.attr('action');
var posting = $.post(url, {
from: $('#from').val(),
label: $('#label').val(),
to: $('#to').val()
});
posting.done(function(response) {
$('#holderSave').html(response);
alert(response);
// Remove line with extra } here
});
return false;
// Remove extra ) here
});
-
改变
submit
为button
与id
<input type='button' id="save" value='Save' class='button'>
-
触发按钮点击事件,序列化表单数据并通过
ajax
发布数据$(document).ready(function() { $('#save').click(function(){ // catch the form's submit event var form = $('#holderSave'); $.ajax( { type: "POST", url: form.attr( 'action' ), data: form .serialize(), success: function( response ) { console.log( response ); } } ); }); });
相关文章:
- 将图像上传ajax与表单提交ajax相结合
- 加载后的页面与ajax表单提交不起作用
- AngularJS JQuery Ajax表单提交等效
- 如何在没有表单提交、没有js、没有jquery和没有ajax的情况下将输入的文本框值存储到php变量中
- ajax表单提交的编码问题
- ajax表单提交后从客户端重定向
- 表单提交与 AJAX 轮询调用
- 在 Ajax Rails 表单提交后,在表单下发布额外的 Javascript 代码 ( ..等)
- PHP Ajax 表单提交 .什么也没发生
- AJAX 调用和表单提交之间的延迟
- 未执行Ajax隐藏表单提交验证
- 我想知道如何只激活表单提交,而不获取jquery中ajax url的值
- 为什么event.prventDefault()和'return false'停止我的AJAX表单提交操
- Jquery、AJAX&PHP,表单提交不起作用
- 在初始表单提交后使用ajax/jQuery自动刷新,然后更改页面标题
- 使用jQuery和Ajax表单提交问题
- 表单提交中的数据与Ajax中的数据
- Ajax表单提交密钥或更改
- 表单 提交 AJAX + PHP
- 表单提交Ajax使用jQuery有时不工作