php - 私のjquery ajaxフォームの送信が機能しません

Question

jqueryでajaxを使用してフォームを送信する次のjavascriptがあります。

$(function() {
    $("#signform").submit(function() {
        alert();
        $.ajax({
            type: "POST",
            url: "page/sign.php",
            data: { mail: $("#inputEmail").val(), 
                    pass: $("#inputPassword").val(),
                    nick: $("#inputNick").val(),    
                    date: $.datepicker.formatDate('yy/mm/dd', new Date()) },
            sucsess: handler,
            error: function(err) { alert('error: ' + err.status) }
        });
    });

    function handler(var){
        $('#message').html(val);
    }
});

そして、bootstrap を使用した html コードがここにあります。

<form class="form-horizontal" id="signform">

// ... something codes

  <div class="form-group">
    <div class="col-offset-2 col-lg-10" align="center">
      **<button type="submit" class="btn btn-default">Sign in</button>** &nbsp;
      <a href="index.php"><button type="button" class="btn">Cancel</button></a>
    </div>
  </div>

</form>

送信ボタンを押すと目次ページに飛びました。

何が悪いのかわかりません。

jsコードはsign.phpの同じページにあります

Answer 1

送信ボタンのデフォルト アクションを妨げていません。event.preventDefault()を呼び出すか、送信ハンドラーから false を返して、これを修正します。

また、handlerメソッドでパラメーターが呼び出されましたが、varこれは無効です

$(function() {

    $(document).on('submit', "#signform", function(e) {
        $.ajax({
            type: "POST",
            url: "page/sign.php",
            data: { 
                mail: $("#inputEmail").val(), 
                pass: $("#inputPassword").val(),
                nick: $("#inputNick").val(),    
                date: $.datepicker.formatDate('yy/mm/dd', new Date()) 
            },
            success: handler,
            error: function(err) { 
                alert('error: ' + err.status) 
            }

        });
        return false; //this will prevent the default action and will stop the event propagation
        //if you do not want to stop event propagation you can use
        //e.preventDefault();
    });

    function handler(val){ //also invalid variable name var here
        $('#message').html(val);

    }
});

Answer 2

これを試してみてください. より効果的です. ここで U=ページの URL, F=ページの方法,D=データ

U=sign.php,

F=ページ、

D="mail: '+$("#inputEmail").val()+',pass: '+$("#inputPassword").val()+',nick: '+$("#inputNick") .val()+',date: '+$.datepicker.formatDate('yy/mm/dd', new Date())+'"

// function for call page method using ajax


     function Operation(U, F, D) {
        $.ajax({
            type: "POST",
            url: U + '/' + F,
            data: D,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            cache: false,
            success: function (r) {
                var str = r.d;
        });
    }