Question

当我提交表单时，我希望在控制台中对鞋子进行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>

Answer 1

您应该阻止默认操作发生，即表单提交。

试试这个：

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

});

}）;

详细了解event.preventDefault here

Answer 2

您的代码未与});正确包含在内，即您的脚本由于});而导致错误，因此您的脚本未按预期执行，因此会提交默认表单。

   $(function() {
        $('#myform').submit( function() {
            $.ajax({ // create an AJAX call...
                ...
            }); //HERE
            return false;
        });
    });

Answer 3

如果我们不使用<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;
    }

Answer 4

脚本中存在语法错误，同时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

Answer 5

关闭你的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;
        });
    });

Answer 6

将其修复为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调用来处理表单的数据，那么确实知道填充所有表单属性的理由。

jquery - 为什么我的表单提交时应该进行ajax调用

6 个答案: