Question

如何在加载页面和提交表单时调用函数？

当我加载页面时，我想调用函数function xxx()

当我提交表单时，我想再次致电function xxx()，我该怎么做？

NOTE: this example code call `function xxx()` when submit form only but not call `function xxx()` when load page

的index.php

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <form method="post" id="f1">
            <input type="checkbox" id="one" name="number" value="one" onclick="xxx()">1<br>
            <input type="checkbox" id="two" name="number" value="two" onclick="xxx()">2<br>
            <input type="checkbox" id="three" name="number" value="three" onclick="xxx()">3<br>
        </form>
        <div id="overlay" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; padding-top: 25%; cursor: wait; font-size: 24px;">
            LOADING
        </div>


<div id="result">
<script>
function xxx(){
    $('#result').hide();
    $('#overlay').show();
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: $('#f1').serialize(),
        success: function(data){
            $('#overlay').hide();
            $('#result').show();
            $('#result').html(data);
            }
        });
    return false;
}
</script>
    </body>
</html>

Answer 1

$(document).ready(function() {
    function xxx() {
        $('#result').hide();
        $('#overlay').show();
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $('#f1').serialize(),
            success: function(data) {
                $('#overlay').hide();
                $('#result').show();
                $('#result').html(data);
            }
        });
        return false;
    }
    xxx(); // called when page is loaded.
    $("form#f1").submit(function(event) {
        xxx(); // call function when form is submitted.
        event.preventDefault();
    });
});

Answer 2

这样做：

$(document).ready(function(){
    function xxx(){
        $('#result').hide();
        $('#overlay').show();
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $('#f1').serialize(),
            success: function(data){
                $('#overlay').hide();
                $('#result').show();
                $('#result').html(data);
                }
            });
        return false;
    }

    xxx();

    $("form#f1").submit(function(e){
        e.preventDefault();
        xxx();
    });
});

或者，如果您不想停止提交表单，请使用以下命令：

$(document).ready(function(){
    xxx();

    $("form#f1").submit(xxx);
});

Answer 3

//when the page is loaded

$.ready(function(){

    // call of your function
    xxx();

    $('#f1').submit(function(){
        // new call of your function 
        xxx();
    });

});

Answer 4

您可以将JavaScript包装在

中

$(document).ready( function() {
   /* JS HERE */ 
});

仅在DOM准备就绪时才适用。

我在HTML中看不到提交按钮，但您可以在该按钮上绑定一个click事件，然后执行一个函数。

Answer 5

在页面加载时，只需在document.ready上运行方法：

$(xxx);

对于表单提交，将其挂钩到表单提交事件：

$("#f1").on("submit", xxx);

Answer 6

将应该运行的功能放在文档就绪功能中。

$(document).ready(function() {
    your code here
});

每当文档加载并准备就绪时，这将调用一个函数。

事实上，你的表单中没有提交按钮，你可以

$("#overlay").click(function() {
  your code here
});

只要单击id为#overlay的div，就会运行函数内部的代码。

Answer 7

如果你想用jquery

加载它

//Remember to use closure, always!!
(function ($) {
    $(document).ready( function () {
        function xxx () {
            //Do your magic
        }

        xxx();

        $('#your-form').submit(function (e) {
             xxx();
             //if you want to avoid the default submit
             e.preventDefault();
        });
    })
})(jQuery);

如何在加载页面和提交表单时调用函数？

7 个答案: