通過jquery ajax（）和serialize（）提交html表單

Question

我想通過jquery ajax提交這個表單，這是我所做的，它不起作用。 即表單提交頁面刷新，我沒有看到響應即打印陣列在同一頁面上。

HTML

  <link rel='stylesheet' type='text/css' href='css/pepper-grinder/jquery-ui-1.10.4.custom.css' />
    <script  type='text/javascript' src='js/jquery-1.10.2.js' ></script>
    <script  type='text/javascript' src='js/jquery-ui-1.10.4.custom.min.js' ></script>
        <form  id="form1" method="get" action="submit.php   ">
            <label>Name of Organization</label>
            <input type="text" name="OrgName" id="OrgName" class="textfield">
            <label>Address of Organization</label>
            <input type="text" name="OrgAddress" id="OrgAddress" class="textfield">
            <input type="submit" value="Register Organization">
        </form>
        <div id="response">ads</div>

    <script>
    $document.ready(function(){
        $("#form1").click((function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });
    </script>

PHP（submit.php）

<?php
print_r($_GET);
?>

Answer 1

使用此 - 出現了一些語法錯誤，必須提交事件

 $(function(){
        $("#form1").submit(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

Answer 2

 $document.ready(function(){

        $("#form1 input[type='submit']").click(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

我的代碼$（“＃form1”）。click（....這里沒有任何意義......當你按下提交按鈕時，你想要事件處理程序。所以我想如果你采取適當的選擇器那么它可能工作完美

Answer 3

$("#form1").click((function(event){

改成

$("#form1").submit((function(event){

Answer 4

函數$(document).ready(function()

嘗試這個

$(document).ready(function(){
        $("#form1").submit(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

Answer 5

2評論：

提交函數需要返回false才能停止正常帖子你可以在表單中使用onsubmit attribtue而不是ready等，就像這樣

<form onsubmit="$.ajax({url:'submit.php', type:'GET',data:$(this).serialize(), success:function(result){$("#response").text(result);});return false;" id="form1" method="get" action>