Ajax関数が正常に動作しません

基本的なデータベースを挿入しようとしましたが、ajaxを使用して挿入しようとしましたが、問題はページがリダイレクトされてしまう問題です。以下）Ajax関数が正常に動作しません

src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

しかし、この解決策は今回もうまくいきませんでした。

これはindex.phpを

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="site.js"></script> 
</head> 
<body> 
<form action="process.php" id="myForm"method="post"> 
    <input type="text" name="uname"><br> 
    <input type="text" name="pass"><br> 
    <input type="text" name="fname"><br> 
    <input type="text" name="lname"><br> 
    <button id="submit" value="Insert"/> <br> 

</form> 
<div id="ack"></div> 
</body> 
</html>

であり、これは

$("#submit").click(function() { 

    $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info) { 

      $("#ack").empty(); 
      $("#ack").html(info); 
      clear(); 
     }); 

}); 

$("#myForm").submit(function(event) { 
    event.preventDefault(); 
    return false; 
}); 

function clear() { 

    $("#myForm :input").each(function() { 
     $(this).val(""); 
    }); 

}

出典

2016-09-30 ali ak

送信ボタン（デフォルトタイプ）として機能しないように、ボタンに 'type ="ボタン属性を追加できます。 –

、実際にクリックハンドラに属していないコールを提出し、それを外に移動し、（event.preventDefaultを使用し、私のスクリプトです）あなたが作成したクリックハンドラ以外の方法でフォームの送信を避けたい場合は、 .submit（）イベントハンドラに

$("#submit").click(function() { 

    $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info) { 

      $("#ack").empty(); 
      $("#ack").html(info); 
      clear(); 
     }); 

}); 

$("#myForm").submit(function(event) { 
    event.preventDefault(); 
    return false; 
}); 

function clear() { 

    $("#myForm :input").each(function() { 
     $(this).val(""); 
    }); 

}

出典

2016-09-30 19:56:01

フォームのフィールドからのデータが$ .postメソッドを介してinsertに送信される場合、なぜsubmit functionを介してフォームを別々に送信する必要があるのでしょうか？ –

必要はありません。 submit（...）は厳密には必要ではありませんが、ユーザーがボタンをクリックする以外の方法でブラウザがフォームを送信する状況を防ぐための代替手段として役立ちます（例えばenterテキストフィールド）。 –

はい、そうかもしれません。 –

スイッチ：

$("#myForm").submit(function(event) { 
    $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info) { 
      $("#ack").empty(); 
      $("#ack").html(info); 
      clear(); 
     }); 
    event.preventDefault(); 
});

出典

2016-09-30 20:25:31

説明

は、ハンドラ関数を提出するのあなたの$ .postコードをラップします。
フォームの送信を防止するには、event.preventDefault（）関数を使用します。
別のクリア関数を使用する代わりに、入力フィールドをクリアするために$（ '＃myform'）[0] .reset（）を使用してください。

コードは

$("#myForm").submit(function (event) { 
    $.post($("#myForm").attr("action"), 
      $("#myForm :input").serializeArray(), 
      function (info) { 
       $("#ack").empty(); 
       $("#ack").html(info); 
       // instead of using the clear() function 
       // separately you may clear all the empty 
       // fields like this 
       $('#myform')[0].reset(); 
      }); 
    event.preventDefault(); 
});

出典

2016-09-30 21:11:54

これはここにjQueryの1.8.2で動作しますがかどうかわからないが、私は過去にこの同じことを達成してきた方法です。

$('#myForm').on('submit', function(e) { 
    e.preventDefault(); 
    var details = $('#myForm').serialize(); 
    $.post('process.php', details, function(data) { 
     $('#ack').html(data); 
     $('#myForm').trigger("reset"); 
    }); 
});

出典

2016-09-30 21:41:47

Ajax関数が正常に動作しません

答えて

関連する問題