Question

我在我的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>

Answer 1

这是语法错误：

$.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
    });

Answer 2

使用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 );
              }
        } );
    });
});

PHP Ajax调用导航到表单提交上的操作页面

2 个答案: